CSS 3 Column Liquid Layout Dynamic Same Height Column

Question

I am wondering how to make a liquid(15%,70%,15%) 3 column css layout have dynamic equal height columns where each column matches the height of the longest column dynamically

Answer 1

You should try using display: table-cell; (this requires a parent element set to display: table; Table cell elements always share the height of their container, and their container (if it's not otherwise set) will always have the height of it's largest child.

Check out this fiddle for an example:

http://jsfiddle.net/kLMtb/

Your html may need a little bit of reformatting as well, I changed a few things in that example, so take a look. Primarily, the center column needs to be put in between the left and right columns in your html.

And take a look at this for an explanation of css table display properties:

http://ajaxian.com/archives/display-table

Answer 2

There are 2 ways I know of to achieve equal height columns.

1) CSS tables

FIDDLE

Markup:

<div id="header">
    <p>This is the header.</p>
</div>


<div class="wpr">
    <div id="leftcolumn">
        <p>This is the left column. Please make me the same height as everyone else!</p>
    </div>
    <div id="contentliquid">
        <p>Some content</p>
    </div> 

    <div id="rightcolumn">
        <p>This is the right column. Please make me the same height as everyone else!</p>
    </div>
</div>
<div id="footer">
    <p>This is the footer.</p>
</div>

CSS

#header {
    height: 100px;
    background: orange;
}
.wpr
{
    display:table;
}
#leftcolumn
{
    width: 200px;
    background: aqua;
    display:table-cell;
}
#rightcolumn
{
    width: 200px;
    background: pink;
    display:table-cell;
}

#contentliquid {
    background: yellow;
    overflow:hidden;
    display:table-cell;
}

#footer
{
    clear:both;
    background: green;
}

2) Faux columns

Requires a background image with repeat-y (Read the above article).

Something like this:

background: #ccc url(../images/bg_birch_800.gif) repeat-y 50% 0;