Easy equal height DIVs without JavaScript possible?

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 colum开发者_开发知识库ns is not known beforehand; it depends on how much content it should be able to fit.

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.

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

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