title: How can I make two vertical DIVs be the same length?
body: <p>I have the following HTML:</p>
  
  <pre><code>&lt;div id="body"&gt;
    &lt;div id="left"&gt;xx&lt;/div&gt;
    &lt;div id="right"&gt;yy
      aa
      &lt;br&gt;
      &lt;br&gt;    
      &lt;br&gt;  
      aa
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and the following CSS:</p>
  
  <pre><code>#body { background-color: yellow; }
  #left, #right { float: left; }
  #left { background-color: blue; }
  #right { background-color: red; }
  </code></pre>
  
  <p>What I need is for the DIV on the left to grow to be the same length as the one on the right? Is this possible? I tried a few things but it doesn't work.</p>
  
  <p><a href="http://jsfiddle.net/KGVMZ/" rel="nofollow">fiddle</a></p>