100% Height <div> based on floating sibling

Question

I have a container div with a floating left-hand navigation pane and a content pane to the right:

<div id="header"></div>
<div id="container">
    <div id="leftnav"></div>
    <div id="content"></div>
    <div class="clearfix"></div>
</div>
<div id="footer"></div>

CSS:

body
{
    text-align: center; /* IE center div fix */
}

#container
{
    width: 800px; /* site width */
    background-color: red; /* so I can see it */
    text-align: left; /* undo text-align: center; */
    margin: 0 auto; /* standards-compliant centering */
}

#leftnav
{
    float: left;
    width: 200px;
}

#content
{
    height: 100%;
    width: 600px;
    margin-left: 200px;
    background-color: green; /* so I can see it */
}

.clearfix { clear: both; }

The #container div stretches to the full height of the floating #leftnav div, but the contained #content div does not stretch to 100% of the height. I've read elsewhere that this is due to the parent #container not having a specified height (defaults to auto) and therefore the 100% is not based on that container; however, I can't specify the height because the left navigation pane height isn't constant.

How can I get the #content div to be 100% of the height of the #container div when the #container div's height is defined by the floating #leftnav?

Answer 1

The easy way would be to use JS to set the height of #content to the height of #leftnav. You can use faux columns on #container and make a slice/gif of the green background and repeat it vertically on #container along with the red however you have it but I'm not sure if it fits your needs.

Answer 2

This is similar to the 3 column liquid "holy grail" CSS layout that has been plaguing people for years (though has been solved in the past couple years, though many of the solutions required browser hacks or Javascript to function).

I'd highly suggest you not reinvent the wheel here as it is difficult to get CSS to perform exactly as you're describing. Here is a good resource for this layout and many other similar liquid layouts: http://matthewjamestaylor.com/blog/perfect-2-column-left-menu.htm

Answer 3

try this CSS

body
{
    text-align: center; /* IE center div fix */
}

#container
{
    width: 800px; /* site width */
    background-color: red; /* so I can see it */
    text-align: left; /* undo text-align: center; */
    margin: 0 auto; /* standards-compliant centering */
}

#leftnav
{
    float: left;
    width: 200px;
}

#content
{
    height: 100%;
    width: 600px;

    background-color: green; /* so I can see it */
    float:right;
}

.clearfix { clear: both; }

I would also suggest using a line break with a clear both rather than a div.