captured sparks

Equal height columns

One of the common issues that has plagued web designers is how to ensure that a sidebar column with a background colour will fill the height of the page when a second column is much longer. One of the most used options is Faux Columns by Dan Cederholm.

I’m going to show you how to quickly achieve identical height columns using jQuery.

We start with a simple layout:

1
2
3
4
5
6
7
8
9

<div id="main">
  <div id="sidebar">
     Lorem ipsum..
  </div>

  <div id="content">
    Lorem ipsum...
  </div>
</div>

We can then use the following jQuery code to ensure that the sidebar is always equal to the height of the content column:

1
2
3
4
5
6
7

var mainHeight = jQuery('#main').height();
  if (mainHeight > 280) {
    jQuery('#sidebar').css({
      height: mainHeight
    });
  } else { 
  };

This grabs the height of the #main div and if that height is greater than 280px, dynamically adjusts the height of the sidebar to match.