css - Sibling divs match height in container

Question

I have three divs in a container: http://jsfiddle.net/fBe9y/

One div has a lot of content. How do I get the other two divs, with less content, to match the height of the longest div?

I tried adding height: 100% to all the divs, but it doesn't work because that would need a height on div.container, which I don't know before rendering.

Answer 1

I recommend using display: table-row; and display: table-cell; for this. In short, what you do is make a table layout, but using <div> tags, and then style them to behave like a table.

This is better than just using a table for semantic and accessibility reasons.

But generally speaking, CSS does not give you many ways to refer to an element's siblings this way. The <table> tag does, but then it confuses screen readers and things.

If you wanted more rows, you would have more .container <div>s, and then create another <div> wrapping them all, and give it display: table;.

So with the same HTML you had, this CSS does what you want:

.container
{
    display: table-row;
}

.tile
{
    display: table-cell;
    width: 100px;
    background: #eee;
    border: 1px solid black;
}?

See Fiddle.

Of note: while display: table; et al. are widely supported, IE did not add support until version 8. If you plan on supporting this for IE 7 or lower, you'll be forced to use a more complicated approach, like @Hristo's.