CSS Floated Div height issue, no simple solution?

Question

Hi,

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.

Answer 4

Hi,

what about this:

.green {
  display:block;
  float: left;
  background: green;
  width: 200px;
  height: 200px;
  position: relative;
}

.outer {
  position: relative;
  background: yellow;
  overflow: auto;
}

.pink {
  left: 250px;
  background: red;
  height: 100%;
  width: 100px;
  position: absolute;
}

Should be working.. maybe I changed the colors, the pink box is the with-growing one! ;)

edit ah ok, I missed the floating on the second box. If this is a must-have then, as mentioned above, faux columns is a good technique I think.

Answer 5

How about a compromise?

If faux columns can´t help you, you don't want to use tables and you already have a javascript solution, I would simply use css (display:table, display:table-cell) and put the javascript in conditional comments for IE6 and IE7.

You can then easily take out the javascript when the time is right and in the meantime, modern browsers won´t have to execute it.