Equal Height Columns

Posted by: admin in MyBlog

AddThis Social Bookmark Button

Typically having equal height columns increases the aesthetics of web sites. The usual method of achieving equal height divs is to use (x)html and css to achieve this. Sometimes however, that's just not possible to achieve. Take this site, where the designers want equal height columns with the left and right columns static (i.e. they don't move when you scroll down). Its possible to do that if you have a scroll bar at the right hand side of the middle column, but not if you want the browser scroll bar on the right hand side.

 

 

 

State 1 - scroll bar at the top with differing size columns

differing columns

 

 

So whats the solution?

the answer is to use javascript. The best solution we've found is on killersites.com called matching_columns.js (simply add the script and a class of columns to the divs of equal height) and voila equal height columns.

State 2 - scroll bar at the bottom with equal size columns

equal heightcolumns static sidebars

The downside is that it doesn't work with when the user has javascript turned off.