I am currently coding a website I designed and by in large it goes well but there this little annoying detail.
Generally when I design a website I do not thing about how easy it will be to code it. I strongly believe that I design for the presentation of the content and not for the code. This time as well I did not think about the little quirk of CSS, namely the total lack of markup that allows for creating equal height columns independent of the content.
One would think it can’t be that difficult but sadly there is no actual CSS rule or property that does that. Therefore one is limited to tricks (at best), hacks or improper markup (at worst).
Assuming that one feels using tables for non-tabular data is a capital offence, one is limited to 4 possible methods.
This is the cleanest code method and would work in any kind of browsers. Sadly it will not work if you wish to have space between the columns or borders around each of them.
This problem is a result of how this method works. The columns are nested and each of them extends all the way to the left of the page. Content is than placed separately on top of the background. Column most to the right is at the bottom of the stack and stretches to the left side of the page. And the next column is placed inside and on top and moved x% to the left and again stretches to the left side of the page etc.
This is an ok solution. It uses CSS3 display:table and display:table-cell properties. It will require a small hack (extra empty column in the middle) if you want to have space between columns or borders around them. Unfortunately, the solution falls flat in IE7 or below. It breaks down the layout and the columns are places under each other. The remedy to this problem could be an alternative CSS for older browsers.
Faux columns is a solution devised by my CSS guru, Dan Cederholm. It includes making a slice of background and repeating it vertically in the parent div to simulate the columns. It does not work for liquid or % based layouts and it also means adding empty divs to the markup if one wants borders or rounded corners.
As you can see there are ways to deal with the problem (as there are methods for nearly everything in css) but none of them is really clean and error-proof.
It sure would be nice if there was a simple CSS3 property to do the job…