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.

However I realized that the case of my website is slightly different than a lot of other website who were looking for a equal column height solution. A lot of other websites have backgrounds for their sidebar or the main content area which necessitates the height based solution, because the only way of making the website look right is if the actual heights of the columns are equal. However I don’t have a background for either the main content area or the sidebar for this website. My problem is that if the sidebar has a left border, and if the main content area is taller than the sidebar then the sidebar looks odd because it’s border doesn’t go down till the footer and vice versa if the main content area has a right border and the sidebar is longer than the main content area. So the crux of the problem is which of the columns should have the border and the solution is to ensure that the taller column always has the border.

First step is to figure out which one of the columns is usually the taller one and assign it a border in css. In the case of Humbug, my sidebar is usually taller than the main content area and has been assigned a left border.

#primary is css id of my sidebar, while #content is the css id of my main content area.

#primary {
  border-left: 1px solid #ddd;
}

Now on document load I run a tiny script which determines which one of the columns is taller and reassigns the border if the main column is taller than the sidebar. Here’s the code for the script.

/*Do make sure you load Jquery too*/
jQuery(document).ready(function() {
    adjustHeight();
});

function adjustHeight(group) {
    primHeight = jQuery('#primary').height();
    contentHeight = jQuery('#content').height();
    if ( contentHeight > primHeight ) {
        jQuery('#primary').css({'border-left': '0'});
        jQuery('#content').css({'border-right': '1px solid #ddd'});
    }
}

What the script does is if it determines that the main content area is taller than the sidebar, then it will assign a right border to the the main content area and zero out the sidebar’s left border.

This solution works cross browser (tested in IE6 too) and doesn’t cause any flickering.

For wordpress, copy the script to the js folder in your theme’s folder and add the following code-snippet to the functions.php file. Lets say the file name of the script that you copied into the js folder is adjustBorder.js.

if ( !is_admin() ) { // instruction to only load if it is not the admin area
   // register your script location, dependencies and version
   wp_register_script('adjustBorder',
       get_bloginfo('stylesheet_directory') . '/js/adjustBorder.js',
       array('jquery'),
       '1.0' );
   // enqueue the script
   wp_enqueue_script('adjustBorder');
}
Though the jQuery Height function doesn’t give the accurate heights for some browsers, it does well enough to determine which of the columns is taller
This solution will work only for websites which need equal height columns and are not using a background and the main content area and the sidebar are separated by a border

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.