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

You have three options.

1. Make the inner divs both as high as the outer div. This isn't too hard;
2. Put the inner divs inside another div and try and use height and/or min-height 100% to make them as high as the containing div although I suspect this won't work as the containing div will probably stretch to the height of its containing div or the page. It might be worth a shot though; or, easiest of all
3. Use tables. This problem is trivial with tables. It's a good example of pure CSS deficiencies.

There is no simple way to two divs "share" height. Tricks like 100% height have cross-browser issues both in terms of the CSS attributes you need to use and with borders, which you are using. Borders are typically in addition to any height that you use.

Some might say use display: table-cell but support for that is rather limited (on IE).

Answer 2

If you're not adverse to a spot of jQuery, you can use EqualHeight, it should do what you want

Answer 3

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.

Answer 4

Perhaps you could use the CSS equal height columns trick?