title: Stretch nested div to height of container div when container has height:auto?
body: <p>I have a container div and two nested divs within. I do not have control over the content of either of these nested divs.</p>
  
  <p>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.</p>
  
  <p>Here's what I tried:</p>
  
  <p><strong>Style:</strong></p>
  
  <pre><code>#container{
    background-color:#FF0;
    overflow:auto;
  }
  
  #left{
    float:left;
    height:100%;
    width:20%;
    background-color:#F00;
  }
  
  #right{
    height:100%;
    width:60%;
    background-color:#0F3;
  }
  </code></pre>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div id="container"&gt;
  
   &lt;div id="left"&gt;
    &lt;p&gt;Content&lt;/p&gt;
    &lt;p&gt;Content&lt;/p&gt;
    &lt;p&gt;Content&lt;/p&gt;
   &lt;/div&gt;
  
   &lt;div id="right"&gt;
    &lt;p&gt;Content&lt;/p&gt;
    &lt;p&gt;Content&lt;/p&gt;
   &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>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.</p>
  
  <p>Note, however, that this DOES work if I give the container a specific height:</p>
  
  <pre><code>#container{
    background-color:#FF0;
    overflow:auto;
    height:300px;
  }
  </code></pre>
  
  <p>Is there any way I can get this to work without resorting to tables?</p>