The advent of CSS has made web layout tasks a lot easier than it used to be in the past. However one bugging problem for designers was how to achieve an equal height in a multi-column layout.

There are countless solutions on offer if you search and here’s a good list of some available techniques.

Three most popular solutions are:

1. Faux columns (using background image)
2. Using Javascript
3. Using CSS positioning

If you’re interested, there are some discussions here.

Personally, I didn’t find any of them simple and elegant so my search for one that is continues. I am looking for a layout which uses no or minimal “hacks” to maximize browser compatibility and be “future-proof”. Easy to understand is another bonus as it will help you in customizing it.

I found a lot of solutions along the way but for now I settle for one from Social Geek. It seems to be the most flexible among all to withstand the rigor of design and cross-browser workability. It needs no background image hack and the trick is easy to understand hence easy to modify!

Pick your codes from here:

I tested my layout on Browser Shot with good results. Out of 42 browsers, only 9 were showing “bad” display and those are mostly a lesser popular ones.