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.
Sub Content
Justin is the Main Content

Sub Content
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: position.
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 top, bottom, left or 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 top:30px, right:30px or bottom:30px, left:30px. But what happens if you add bottom and top values?
Sub Content
Justin is still the Main Content

Sub Content
And there you have it. When you use both the top and 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:
.main {
position:relative;
margin-left:20%;
}
.sub {
position:absolute;
top:0;
bottom:0;
width:20%;
}
.sub.left {
left:0;
}
.sub.right {
right:0;
}
Browser Check
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.