css - How to make floating inner divs the same height as the highest div

Question

In the following code I would like the div with 'y' to match the height of the div with the 3 'x's.

<div style="border: 0px solid red; margin: 0px 0px 5px; overflow: hidden;">
<div style="border: 1px solid rgb(129, 11, 0); margin: 0px; padding: 5px; background-color: rgb(30, 23, 22); width: 312px; float: left;">
    x<br/>x<br/>x
</div>
<div style="border: 1px solid rgb(129, 11, 0); margin: 0px; padding: 5px; width: 312px; background-color: rgb(30, 23, 22); float: right;">
    y
</div>

Things to note are the inner divs are floating.

Answer 1

There was a solution I saw at A List Apart (I think), where you give the two inner columns a huge bottom padding, but the same huge value as a negative margin. This all works as long as the column is not more than 32000px high, which is rare. Something like:

.col {
  float: left;
  padding-bottom: 32000px;
  margin-bottom: -32000px;
}

...where "col" is the class name for any column. You can then style individual columns however you like with a separate class.

<div class="col xxx">x<br />x<br />x</div>
<div class="col yyy">y</div>

Another option is to use a background image on the outer div, including your borders etc. This approach obviously means it's a little more difficult to changes the columns (widths, colors) once set up.