How to Create Equal Height CSS Columns?
This poses a challenge to many web designers. Unlike table columns, CSS divisions don't communicate with each other. Division height is determined by the amount of content it contains.
Option #1 Choose the right template
Start your projects with a CSS Layout specifically designed to support the illusion of Equal Height Columns. Matthew James Taylor describes how on his web site http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks
Option #2 Faux Columns
Create a 2 or 3-toned background image that is the same width as your outer #container, and repeat it vertically down the page. This technique gives the illusion of equal height columns without any complex code, hacks or scripts. It works in all browsers. But for best results, your layout should be fixed-width in pixels. This method is not suitable for Liquid or % based layouts.
Option #3 CSS Display:table
If your target audience is tech savvy and you're resonably sure they are using modern equipment, use display:table properties. This CSS method works very well in modern browsers like Safari, Chrome and Firefox but sadly it is NOT supported by older browsers such as Internet Explorer 6, 7 and 8.
Option #4 CSS Column Composer Magic
Another great product from the folks at http://projectseven.com/ This commercial extension for Dreamweaver enables web designers to rapidly prototype professional looking CSS layouts with equal height columns, shadows, gradients and rounded borders. Way cool.
Option #5 JavaScript
Do it yourself with PVII's Equal Height Columns Script. You'll find a download kit and detailed instructions on how to use it at http://www.projectseven.com/tutorials/css/pvii_columns/index.htm.
In summary, use whichever methods best suit your project goals and target audience. We hope you found this article helpful.
