100% height css

Question

I have 3 divs side by side that are nested with a container div. Each div will have different content on various pages, so I need each of the nested divs to stretch to the height of the div with the most content. I've tried using 'height: 100%' and 'height: auto' but neither seem to work. Can anybody help me out or point me in the right direction please. My html is:

<div id="container">
  <div id="column1"></div>
  <div id="column2"></div>
  <div id="column3"></div>
</div>

Many thanks in advance.

Answer 1

While Truth's answer is the best, certain browsers (the usual suspects) don't implement table-cell correctly.

A works-across-all browsers solutions is to assign an overly large amount of vertical padding and inverse margin. For example:

<div class="container">
    <div class="column" style="background: #cc0000;">blah</div>
    <div class="column" style="background: #00cc00;">blah<br />blah<br />blah</div>
    <div class="column" style="background: #0000cc;">blah<br />blah</div>
</div>

And CSS:

.container {
    width: 300px;
    height: auto;
    overflow: auto;
}

.container div.column {
    float: left;
    width: 100px;
    height: auto;
    padding: 0 0 1000px 0;
    margin: 0 0 -1000px 0;
}

Answer 2

Can you use jQuery?

If yes try: http://jsfiddle.net/Rnf82/2/

The problem with {display: table-cell;} is that it's not supported by older versions of IE

Answer 3

Use display: table-cell on all 3 inner divs:

#container div { display: table-cell; }

Here's a Working Example.