Stretch nested div to height of container div when container has height:auto?

Question

I have a container div and two nested divs within. I do not have control over the content of either of these nested divs.

What I essentially need is to make the two nested divs always have the same height. I figured this can be achieved by giving the container div height:auto so that it would stretch its own height to the tallest of the two nested divs (each of which stretches to fit its own content), and then the other nested div would stretch to 100% of the container's height.

Here's what I tried:

Style:

#container{
  background-color:#FF0;
  overflow:auto;
}

#left{
  float:left;
  height:100%;
  width:20%;
  background-color:#F00;
}

#right{
  height:100%;
  width:60%;
  background-color:#0F3;
}

HTML:

<div id="container">

 <div id="left">
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
 </div>

 <div id="right">
  <p>Content</p>
  <p>Content</p>
 </div>

</div>

But this does not work. The container stretches to fit the longest div ("left" in this case) but the shorter nested div ("right") does not stretch itself.

Note, however, that this DOES work if I give the container a specific height:

#container{
  background-color:#FF0;
  overflow:auto;
  height:300px;
}

Is there any way I can get this to work without resorting to tables? Your help is much appreciated.

Answer 1

I use this approach: http://matthewjamestaylor.com/blog/perfect-2-column-double-page.htm

Answer 2

The Important Note is that Percent Value for Height Deprecated a while ago.

So you have touse another pattern.

Most of the time (specially in your case) the panels height are sets automatically. So it is better to increase the height with a little javascript

<script>
    function IncreaseHeight()
    {
        var first = Document.getElementById("Right").style.height;
        var second = Document.getElementById("Left").style.height;

        if(first < second)
        Document.getElementById("Right").style.height = Document.getElementById("Left").style.height;
        else
        Document.getElementById("Left").style.height = Document.getElementById("Right").style.height;
    }
</script>

note that change the place of Right and Left base onyour case.

Answer 3

The two most common ways to do this are Faux Columns using images or setting the heights to equal values with JavaScript. I did a screencast to demonstrate the second technique, Equalizing Column Heights with jQuery. The technique could be easily adapted for other libraries or for plain JavaScript.