#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2004
    Posts
    73
    Rep Power
    11

    Automatically stretch CSS layout vertically down?


    Experimenting with layouts.... How do I get the right-hand DIVs (content = 'two') to automatically stretch down to the same height as the left-hand DIVs (as table cells would):

    Code:
    <HTML>
    <HEAD>
    <STYLE>
    .frame {
    	margin-left : 5%;
    	width : 90%;
    	font-size : 1em;
    	text-align : center;
    }
    .header {
    	width : 800;
    	border : 0.05em dashed black;
    	text-align : center;
    }
    .header1, .header2, .header3 {
    	float : left;
    	margin : 1px;
    	vertical-align : center;
    	font-size : 0.8em;
    	position : relative;
    	border : 0.05em red solid;
    }
    .header1 {
    	text-align : right;
    	width : 750;
    }
    .header2 {
    	text-align : center;
    	width : 40;
    }
    .clear {
    	clear : both;
    }
    </STYLE>
    </HEAD>
    <BODY>
    <DIV CLASS="frame">
    <DIV CLASS="header">
    	<DIV CLASS="header1">One<BR>One Again</DIV>
    	<DIV CLASS="header2">Two</DIV>
    	<DIV CLASS="clear"></DIV>
    	<DIV CLASS="header1">One</DIV>
    	<DIV CLASS="header2">Two</DIV>
    	<DIV CLASS="clear"></DIV>
    	<DIV CLASS="header1">One</DIV>
    	<DIV CLASS="header2">Two</DIV>
    	<DIV CLASS="clear"></DIV>
    	<DIV CLASS="header1">One<BR>One Again</DIV>
    	<DIV CLASS="header2">Two</DIV>
    	<DIV CLASS="clear"></DIV>
    </DIV>
    </DIV>
    </BODY>
    </HTML>
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2004
    Posts
    8
    Rep Power
    0
    Does this answer your question?

    Although I've just remembered an ala article so I might go back and edit that post now.
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2004
    Posts
    73
    Rep Power
    11
    Originally Posted by lavalamp
    Does this answer your question?

    Although I've just remembered an ala article so I might go back and edit that post now.
    Yes and no - and I read your article a few days back.

    If an element set to 100% stretches down as far as the bottom of its containing element then it follows that that containing element must have a height set or itself be 100% and stretch down as far as the bottom of its containing element..... etc. etc. etc. It becomes ridiculous and, somewhere along the line, you have to specify the absolute height of a containing element.

    I don't want to have the right hand element stretch all the way down the page as I need to have several rows extending down the page. Neither do I know the height of any row as this is all scripted by PHP and, while I know the exact text that goes into the right-hand box, an arbitrary amount of text is pulled into the left-hand box meaning it may be over one line or it may be over several. For the view of what I want it to look like (accomplished by good old-fashioned always-do-what-you-want-in-a-logical-manner tables, have a look here and select 'List all by ... Author'.

    I find it difficult to believe that CSS, the" web designers' answer to layout nightmares" can't even handle something that tables would do in their sleep.

    Why do I want to use CSS instead of tables? Because with the system I'm designing above, I want those using it to have the freedom to design the look they want - hence CSS.

IMN logo majestic logo threadwatch logo seochat tools logo