CSS Floated Div height issue, no simple solution?

Question

I have an issue with CSS I can't solve.

I've made a little diagram.

Let's say that the pink and green box's height are determined by there content. The pink box could sometimes be the smaller one.

What I am trying to do is have the smaller box fix it's height to the outer containing div, so that it would have the same height as the pink box (or vice-versa).

Anyone have any solutions?

Min-height on the pink and green boxes won't work because they may exceed that height (also no IE6 support).

100% height on the pink and green boxes won't work because the outer div does not have a fixed height.

A table would work, but come on, a table?

I could fake backgrounds and left-right-borders on the pink and green boxes by putting them in the outer div's background. But that seems messy.

At the moment I have a js solution, but there must be a simpler one.

Cheers.

Answer 1

Apart from Javascript/Jquery or tables, the only thing I can think of is a display: table-cell based solution (explanation here) - but that won't work in IE either, and there isn't much difference to using a table straight away, is there?

I'd say this is one of the rare cases where, due to sucky CSS specifications and/or implementations, there is no way around a table.

Edit: As other answerers have pointed out, there are CSS workarounds ("Faux columns") that will work in most cases. Using "CSS tables" (using display: table properties) I do not deem valid solutions yet, as they are not supported by IE6, a browser that still has a considerable market share.

Answer 2

Use the Faux Columns technique for that. Basically, you’ll have to use a repeating background image on the parent element containing both boxes.

Answer 3

This is the same as the same height columns problem, see this blog post for a solution.