How can I make two vertical DIVs be the same length?

I have the following HTML:

&开发者_Go百科lt;div id="body">
  <div id="left">xx</div>
  <div id="right">yy
    aa
    <br>
    <br>    
    <br>  
    aa
  </div>
</div>

and the following CSS:

#body { background-color: yellow; }
#left, #right { float: left; }
#left { background-color: blue; }
#right { background-color: red; }

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.

fiddle

There are numerous way to try it. You didn't assign either of them a height so they won't be doing much at the moment. If you add equal heights, they can be the same. You can try style="height:100%;" for both of them

Or add that to those IDs in your CSS, or make a class with it and assign that to your divs.

something like this $("#right").css("height", $("#left").css("height"));

Here's a way about it, using display: table-cell

Won't work in older browsers.

http://jsfiddle.net/ZrGBB/

You could having the right inside the left as so

<div class="left">
aa
   <div class="right">
     bb
     <br/>
     <br/>
     bb
   </div>
<div style="clear:both"></div>
</div>

and floating the right div right and stoppnig the left colapsing using the clear:both

There's no real simple one line of code way to do this but there are many solutions out on the web like Faux Columns or Equal Height Columns.

Give it a Google and find a solution that works best for you.