"Static" design - does that make sense?

[Forte]

Hi,

I've got a problem driving me nuts, and the reason is simply that I may know many things, but CSS is not one of them...

It is a classical problem: A container div containing two divs, divA and divB, side-by-side, with style

float: left

and

float: right

respectively. Below the container I got another div, divC.

I want both divA and divB to take on the height of the highest of the two, which I got working. The thing is that I do not want anything to move if I start resizing the browser window. Everything should just stay...well...static, I guess. As it is now, divC is stuck to the bottom of my window even if I make the window smaller and divC should disappear. Eventually divC begins overlapping my containerDiv.

some style settings (trying to avoid posting lengthy code:
Body:

height: 100%

.

ContainerDiv:

position: relative;
height: 100%;
width: 940px;

divA:

position: relative;
height: 100%;
float: left;
width: 700px;
background-color:#ffffff;

divB:

position: relative;
height: 100%;
float: right;
width: 220px;
background-color: #f0f0f0;

I have tested several different approaches with no luck: Added an empty div inside containerDiv, right after divB, with

float:both;

Played with different values of the overflow attribute of containerDiv. I can get close with some of the table-* values, but I want this to work in IE6 or at least IE7.

And many more...

My head is just spinning after hours of playing around with this. I do not set any DOCTYPE explicitly, could that be part of the propblem? If so, which value should I use? What other information could I show you? Of course, the easiest thing would be a link to my page, but that is against forum rules and I agree with the reason for that rule.

Ideas?

[Paul_o_b]

Hi,

If you are looking for equal columns then you can only do this using the display:table properties available from IE8+ only (or by using some of the new CSS3 box layout modules (with limited browser support as yet)).

To support older browsers such as IE6 then you have to be creative and if you google "css faux columns" or "equal columns in CSS" you will see loads of inventive examples that address this problem. However, the examples do usually require extra divs and a good understanding of how css works to use them properly.

You have already fallen into the beginners trap of expecting 100% height to mean something other than 100% height.:) When you give an element a specific height then that's what it gets (most of the time). So if you say 100% height then the element will be 100% of its parent height and thus never be able to grow. So you can't really use height:100% on any elements that need to expand.

You should also know that you cant just say height:100% and expect it to work because percentage heights must have an immediate parent that has a specific height defined in order to work. This height must be a px or em height (or a percentage height based on another immediate parent that has a height defined). Elements that have their height dictated by their content or by auto height settings or by min-height will not be able to pass down any height to their children.

Suffice to say you will rarely ever be able to use 100% height in a usable way for a fluid height layout. You could set html and body to height:100% and then set the first container on the page to min-height:100% and it will reach the bottom and still grow. However you could not have two or three of these elements and expect them to grow in unison and neither could you nest further elements with min-height because they collapse to height:auto also.

Effectively setting heights is a dead end that you can't go down but have a look at the "sticky footer thread" which explains some of these associated problems.

As I said at the beginning to get equal column effect for older browsers you need to resort to tricks and illusions. Faux columns are easy and need no extra html but you have to make images to provide the background to the columns and then the image is repeated on the main parent (and not on each column) and this provides the equal column effect as the main parent contains the floated columns (assuming you have cleared it properly).

There are other methods such as negative margins, wide borders and ,multiple offset nesting all of which will do the job but at the cost of some complexity.

My favourite technique is an absolute overlay which use an extra empty div for each column and overlays the background over the column with absolute positioning. Only absolute elements can keep pace with relative elements and you can therefore set an absolute overlay to follow a relative divs height using top and bottom co-ordinates. The absolute overlay holds no content so if does not matter that it is removed from the flow.

A short example:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
html, body {
margin:0;
padding:0;
background:#ccc;
color:#000;
}
p, h1 { margin:0 0 1em }
.wrapper {
position: relative;
width: 940px;
margin:auto;
overflow:hidden;
}
.main, .l {
position: relative;
z-index:2;
float: left;
width: 700px;
background-color:#ffffff;
padding:1px 0;
}
.sidebar, .r {
position: relative;
z-index:2;
float: right;
width: 220px;
background-color: #f0f0f0;
padding:1px 0;
}
.r, .l {
position:absolute;
top:0;
right:0;
bottom:0;
width:220px;
z-index:1;
padding:0;
}
* html .1, * html .r {/* ie6 fix*/
top:auto;
bottom:0;
height:9999em;
}
.l {
width:700px;
left:0;
right:auto;
}
.footer {
clear:both;
width:940px;
margin:auto;
background:red;
padding:1px 0;
}
</style>
</head>

<body>
<div class="wrapper">
<div class="main">
<h1>Main Content</h1>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
</div>
<div class="sidebar">
<p>Sidebar content</p>
</div>
<div class="l"></div>
<div class="r"></div>
</div>
<div class="footer">
<p>Footer content</p>
</div>
</body>
</html>

Either column can be the longest and the other one will always keep track.

As I said above faux columns could do this without the extra html but of course you would need to make the images as required.

You must use a valid doctype or all bets are off as IE will resort to behaving much like IE5 and not use any of the css it has learned in this century. Other browsers will also show differences as they will revert to quirks mode which is undesirable (unless you are doing to for a specific reason). Use a full doctype to maintain standards mode and modern browsers will behave much the same.

[Forte]

Thank's, Paul.

If "expecting 100% height to mean something other than 100% height" is the only trap I've fallen into I'd be quite happy... ;)

Looking at your supplied code I end up having two questions:
1. It appears to me as if you are re-assigning styles to .r and .l throughout the CSS. For .l you first have

.main, .l {...}

, where position is set to relative
then

.r, .l {...}

, where position is set to absolute
and finally only

.l {...}

Any hints on how that works? Or any reading directions?

2. The ie6 fix reads * html .1.... Should it be the number 1 or is it a typo and should read the letter l?

/Jonas

[Paul_o_b]

1. It appears to me as if you are re-assigning styles to .r and .l throughout the CSS. For .l you first have
.main, .l {...}, where position is set to relative
then
.r, .l {...}, where position is set to absolute
and finally only
.l {...}

Any hints on how that works? Or any reading directions?

Hi,

I used the letter "l" for left column and the letter "r" for right column and although that's a bad way to actually name classnames it was only meant to make the demo easier to read (although I forgot that the letter "l" (L) looks like a 1 "one" but classnames and ids cannot start with a digit so therefore it must be the letter "l" - so sorry about the typo - I even caught myself out with that one :).

I applied the rules for the overlay column like so:

.main, .l {
position: relative;
z-index:2;
float: left;
width: 700px;
background-color:#ffffff;
padding:1px 0;
}
.r, .l {
position:absolute;
top:0;
right:0;
bottom:0;
width:220px;
z-index:1;
padding:0;
}
* html .1, * html .r {/* ie6 fix*/
top:auto;
bottom:0;
height:9999em;
}
.l {
width:700px;
left:0;
right:auto;
}

However perhaps for example it would have been better to create the rules in full rather than mixing the styles in with other rules just to save a few bytes (or trying to be too clever).

e.g. The rules for the left column when separated would look like this:

.main{
position: relative;
z-index:2;
float: left;
width: 700px;
padding:1px 0;
}
.l {
position:absolute;
top:0;
left:0;
bottom:0;
width:700px;
z-index:1;
width:700px;
background-color:#fff;
}
* html .l{/* ie6 fix - using the "* html" hack */
top:auto;
bottom:0;
height:9999em;
}

IE6 doesn't understand when you use top and bottom together and only applies the last one (i.e. bottom:0) and will have no height span. Therefore for IE6 only we create really large height that will never be exceeded and just let the absolute element stretch out of the box but hide the overflow with overflow:hidden.

Hope that clears it up a bit but just shout if there's anything not clear or if there are any more typos (I must have consumed too much Christmas Spirit).:)

[Forte]

Thank's again,

That sorted it out. After some minor adaptions it now behaves the way I want it to. I will choose between this and faux columns, as I suspect that faux columns can be achieved with very little effort in my existing design.

For completeness of this thread I'll post the complete example after that I've tampered with it slightly. Including DOCTYPE... ;)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
html, body {
margin:0;
padding:0;
background:#ccc;
color:#000;
}
p, h1 { margin:0 0 1em }
.wrapper {
position: relative;
width: 940px;
left:10px;
overflow:hidden;
background-color:#ffffff;
}
.main {
position: relative;
z-index:2;
float: left;
width: 700px;
padding:1px 0;
}

.sidebar {
position: relative;
z-index:2;
float: right;
width: 220px;
background-color: #f0f0f0;
padding:1px 0;
}

.l {
position:absolute;
top:0;
left:0;
bottom:0;
width:700px;
z-index:1;
width:700px;
background-color:#fff;
}

.r {
position:absolute;
top:0;
right:0;
bottom:0;
width:220px;
z-index:1;
padding:0;
background-color: #f0f0f0;
}

* html .1, * html .r {/* ie6 fix*/
top:auto;
bottom:0;
height:9999em;
}

.footer {
clear:both;
width:940px;
position: relative;
left: 10px;
background:red;
padding:1px 0;
}
</style>
</head>

<body>
<div class="wrapper">
<div class="main">
<h1>Main Content</h1>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
</div>
<div class="sidebar">
<p>Sidebar content</p>
</div>
<div class="l"></div>
<div class="r"></div>
</div>
<div class="footer">
<p>Footer content</p>
</div>
</body>
</html>