|
|
|
| |||||||||
![]() |
|
|
«
Previous Thread
|
Next Thread
»
|
Thread Tools | Search this Thread | Rate Thread | Display Modes |
|
#1
|
|||
|
|||
|
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
|
|||
|
|||
|
Does this answer your question?
Although I've just remembered an ala article so I might go back and edit that post now. |
|
#3
|
|||
|
|||
|
Quote:
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. |
![]() |
| Viewing: Dev Shed Forums > Web Design > CSS Help > Automatically stretch CSS layout vertically down? |
| Thread Tools | Search this Thread |
| Display Modes | Rate This Thread |
|
|
|
|