Question

​<div id='container'>
    <div class='left'></div>
    <div class='right'></div>
    <div class='clear'></div>
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

Given the simple markup above, which can be seen in action here at jsFiddle, how do you get the floated right div to take up the remaining height of its parent container that doesn’t have an explicit height? The parent container’s final height is determined by the floated left div.

Typically, I solve this issue through Javascript, and fix the heights after the page has loaded. But, there must be an alternative, standard, and optimal method of how this is handled.

I think this is just an inherent issue of structuring a layout this way, so what is the alternative beyond using a <table>?

Answer 1

Can’t be done without explicit height on the parent using floats.

You can however use display: table-; and table-cell which mimics the behavior of tables without actually using them:

#container { 
    width: 200px;
    background-color: green;
    display: table;
}
.left {
    display: table-cell;
    width: 30px;
    height: 200px;
    background-color: red;
}
.right {
    display: table-cell;
    height: 100%;
    width: 30px;
    background-color: blue;
}

This way you don’t need the clearing element and the two divs will always take up 100% of the height, as long as it’s declared.

http://jsfiddle.net/6XagR/4/
​