Easy equal height DIVs without JavaScript possible?

Question

I've worked mostly with table-based layouts up to this point, but since it's considered a no-go thing of the past now I've taken on the task of learning DIV-based layouting.

One of the most annoying challenges so far for me has been figuring out a way to get equal height DIVs that work on all major browsers, doesn't rely on JavaScript and doesn't require complicated CSS tactics. It kinda makes me wonder why using DIVs is the preferred method of doing layouts while tables allow for the quick and easy creation of equal-height page elements.

What are my options? If there's no perfect way, would you recommend doing it with jQuery? I'd like to apply this technique to the sidebar that can be viewed here. (This is a test environment for a theme I'm developing.)

Update: the height of the columns is not known beforehand; it depends on how much content it should be able to fit.

Answer 1

here is an example using pure css

body{margin-bottom:50px}
div.holder { overflow:hidden }
div.holder div { float:left; width:30%; background-color:#9C0; margin-right:5px; padding:10px; padding-bottom:9000px; margin-bottom:-9000px }

http://abcoder.com/wp-content/uploads/2009/09/css-equal-height-three-column-layout.html

Answer 2

There is no perfect way as far as I know, and this is one of the weak points of CSS.

In your case, however, you may be able to work with the Faux Columns technique.

Answer 3

If the standards don't let you do what you need, screw them and use a table.