CSS Equal Height Columns

While looking for a solution for the thread called "background repeat of the left cotainer based on middle container" on the WebMasterWorld Forum I automatically thought of using tables. It is definitely the easiest but its browser support is not the best (see Seven Reasons to go Table Free). So digging a bit further first I found the perfect keyword to look for in a search engine: Equal Height Columns.

Most of the posts and articles talk about using tables, JavaScript or the "Faux Columns" solution, although probably the cleverest is Using Separate Background Color <div> elements for the background of each column - have to say, it's a bit complicated though, not so easy to grasp the meaning of it. The post about Four Methods to Create Equal Height Columns explains all options very clearly also listing the advantages and disadvantages of each.

I think the best of all however is described in the blog post Equal Height Columns using CSS - again, after the tables, JavaScript and the "Faux Columns" method it explains "Another Way" that is extremely simple: adding overflow: hidden, padding-bottom: 2000px and margin-bottom: -2000px, case closed! :)

Didn't find what you were looking for? AskMe! Found a broken link? Please ContactMe!

AboutMe
I'm a talented webdesigner with the main goal of satisfying the customer. I'm precise, easy-going, simple, solution-driven and kind.
Nothing is impossible and everything is manageable!HireMe