I have a site I have started building and i am using a 3 column layout. I am using 3 floated divs for my columns (hopefully I haven't made a mistake by making that decision). The left column is using a different background color from the other two. I have all three columns nested inside a container div with overflow set to auto to ensure the container expands to conain the floats. The problem I am having is figuring out how to have the 3 columns stretch to the same height as the tallest column. In some pages the left column will be tallest and in some the middle column will be. Since the containing div is not a fixed height, I can't use "height: 100%;" for my divs to get them to expand.

Is there a standard way of implementing this or have I gone wrong by using floating divs for my columns?

You can see the site's home page in progress here. Basically I want that red column to expand to the height of the middle column.

test.zeidelicious.com
username is "test" password is "test" to see the page.

Assuming that there is a general solution to this I don't think the code is needed, but here is the relevant CSS just in case:

body {
    min-width: 760px;
}

.wrapper {
    width: 760px;
    margin: 0px;
    margin-left: auto;
    margin-right: auto;
    overflow:auto;
}

.left_menu {
    width: 119px;
    padding: 0px 0px 0px 10px;
    margin: 0px;
    float:left;
}

.main_content {
    width: 380px;
    padding: 0px 25px 0px 25px;
    margin: 0px;
    float:left;
}

.right_column {
    width: 191px;
    padding: 0px 10px 0px 0px;
    margin: 0px;
    float:right;
}

This is kind of a tricky subject... there are a few way to do it, but by far the easiest way is faux columns... basically creating a background image that entends the height of the pages.. this is what I had to do on my business site.

Hey that makes sense. Thanks for the tip.

Now luckily I am working with fixed widths.. What would I have done if the widths were variable? I assume that is a trickier solution.

Pretty sure this has already been covered in the stickies, but despite that, here is a way to make them stretch with Javascript, that should work without requiring fixed width: http://www.paulbellows.com/getsmart/balance_columns/

Very easy, but keep in mind it won't look the same with Javascript disabled.

like wayfarer I usually use javascript to force them to extend with variable widths.

I don't usually use this technique, since I usually work with fixed widths, but it is in my bag of tricks in case I need it.

Faux columns, a Y-repeating background that just LOOKS like it is a part of the column, is preferable, since there is minimal coding involved.

I have to agree, faux columns works really well and it's easy to implement. I use it most of the time.

Just make sure that you are also CLEARING your floats as required.

try
min-height:720px;
height: auto !important;
height:720px;

assume as 720px is a suitable hieght for any browser..
however for some pages that then content's more high than the float column,
there is the space below that float column.

anyway, you also can try insert this into float column CSS:-
min-height:100%;
height: auto !important;
height:100%;

and dont't forget to clear:both at the footer div
I hope it will work and useful for you.

<please set up a signature, but read the forum rules before you do>

I've had to deal with this problem countless times on so many sites...

Thankfully, I eventually found this fix.

Right before the end of your wrapper div place this:

<br class="clearBoth">

Then in your CSS add this:

.clearBoth {
clear:both;
}

Put all your divs inline and the clearing BR will stretch each column to the maximum height.

The min-height method will not work in IE6 and below because it doesn't support min/max width/height.

Making sure you clear your floats is crucial.