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