height:100% … Why won’t it work?
The CSS height property is a tricky one.
height:100% should, by definition, make a box 100% the height of its parent. This works, yes, but only when the parent has a fixed height. So, if the parent has a defined height of 100px, its child, at
height:100%, will also have a height of 100px.
The issue comes when we are dealing with dynamic content, where the height is dependent on the amount of content loaded.
When dealing with multiple column layouts, there is usually one column that defines the height of the parent container. The traditional approach to making both sub content columns stretch to be the height of the main content column would be the Faux Columns method. Using tables (as table cells automatically take full height of the table row) is also an option, but that throws any developments in Web Standards out the window.
I have stumbled upon a better way, using the CSS property:
Using absolute / relative positioning has many hidden and useful secrets. Most of the
position power lies in the idea that you are decoupling content from the natural flow.
By default, setting an element to
position:absolute and then defining its
right values will position said element to the pixel value from the top, bottom, left or right, relative to the top left corner of the
body element. When you set a parent container to
position:relative, however, absolutely positioned elements will be positioned relatively (appropriately named) to the parent container’s top left corner.
Now, it makes sense to position something
left:30px. But what happens if you add
And there you have it. When you use both the
bottom values together, the top of the child element is positioned to the top of the parent element and the bottom of the child gets linked to the bottom of the parent, giving not only the appearance but the functionality of full column heights.
There are a few things you have to remember though. Do not set the main content column (the parent height “definer”) to absolute positioning. This will collapse the parent container. We need this element as our anchor, so to speak. You will also notice that once you set both sub content columns to absolute positioning, the main content column will lie snug against the left side of the parent container. To solve this, give the main content column a left margin that will be the same value of your left column width (or the sum of the widths of any columns that precede the main content column). Finally, this may not be the best solution if you have a layout with three columns of changing, scrolling content, as the heights are all dependent on the one column. It’s pretty much optimized for a situation like a blog, where one column usually dominates in height.
The good stuff:
I haven’t tested this extensively but it works fine in: Mozilla, Webkit and IE 7+. It doesn’t work in IE6, but do we really care? If you do, the Faux Columns technique is a good fall back for any old, out of date browsers. Please let me know your results in Opera or any other obscure browser.
Editor’s Note: No Justins were harmed in the creation of this post.