Equal Height Columns using a Simple Jquery Maneuver

Equal Height Columns is a widely debated subject. There are a variety of solutions for it: faux columns, fat border and negative margins, etc. I like to be a purist and hence try to do things in pure css as often as I can, but I leaned towards JavaScript for this one. The traditional way of doing it using JavaScript is to calculate heights of the main content column and the sidebar columns and then change the height of the shorter block so that it is equal to the height of the taller block. Theoretically it sounds straightforward. However the gotcha is that there are not many cross browser solutions for calculating height correctly. jQuery’s height function has a bug in Opera, needs a work around. For some reason, it wouldn’t work correctly in IE7 either. Changing the column heights isn’t smooth either and causes flickering. Continue reading