jQuery: Using jQuery to align column heights

This tutorial will show you how to use the popular jQuery library to match the height of 2 columns in your layout. I've found that I'm always needing to have this type of feature on design projects in order to make sure a navigation column is the same height as the main body content section, or vice versa. This walk through will get you there with a quick bit of jQuery added to your code.

First, we will start off with the basic XHTML and CSS for the columns in use.

First, for the XHTML:

<div id="test_main_body">
  
</div>

<div id="test_right_col">
  
</div>

Next, for the basic CSS to represent our items so we can view them easily here:


#test_main_body {
  position: relative;
  width: 320px;
  height: auto;
  border: 1px solid #FF0000; /* for testing only */
  background: #EEEEEE; /* for testing only */
  float: left;
  clear: none;
  margin: 0 10px 0 0;
  padding: 10px;
}
#test_right_col {
  position: relative;
  width: 175px;
  height: auto;
  border: 1px solid #000000; /* for testing only */
  background: #DDDDDD; /* for testing only */
  float: left;
  clear: none;
  margin: 0;
  padding: 10px;
}

We should now have a page that looks like the following:

Test Main Body

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam at sem. Mauris ligula felis, euismod sit amet, porttitor sit amet, sagittis quis, erat. Pellentesque ligula purus, vulputate sit amet

Right Column

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam at sem. Mauris ligula felis, euismod sit amet, porttitor sit amet, sagittis quis, erat. Pellentesque ligula purus, vulputate sit amet

Now we need to download the jQuery library from the jQuery website, and include it into our page using the following code:

<script type="text/javascript" src="/path/to/jquery/jquery.js"></script>

Now, we have everything we need in order to apply our jQuery code to this section to figure how first how tall the two elements are, and then make them the same height in order to improve appearance.

First, we use the following two lines to determine the height of the two columns in question.


var left_height = $('#test_main_body').height();
var right_height = $('#test_right_col').height();

Now we have two variables, left_height, and right_height that we can use to compare to each other, and determine what our script needs to do.

The following section is going to first determine if the right column is taller than the left, and if it is taller, we will reset the height of left section to be the same as the height of the right column. Second, if the right column is NOT taller than the left column, it will perform in reverse, and assign the right column the height of the left column, and either way, the columns should match up top and bottom.


  if(right_height > left_height) {
    $('#test_main_body').height(right_height);
  }
  else {
    $('#test_right_col').height(left_height);
  }

Now, with this code applied to our document, our original sections should now render as they do below at the same height.

Test Main Body

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam at sem. Mauris ligula felis, euismod sit amet, porttitor sit amet, sagittis quis, erat. Pellentesque ligula purus, vulputate sit amet

Right Column

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam at sem. Mauris ligula felis, euismod sit amet, porttitor sit amet, sagittis quis, erat. Pellentesque ligula purus, vulputate sit amet

As you can see now, our main body column, and our navigation or right hand column are matching up to exactly the same height. It's as simple as that.

I actually use this method on many of my latest sites to either line up main sections of the body or layout like I've demonstrated here, but there are other times where this can be useful for smaller blocks of content that are nested deeper in the structure of the site.

I hope this helps someone turn what can sometimes be troublesome with pure CSS, but once implemented a couple of times is a pure breeze with the magic of jQuery.

...himerus ...himpressive

Web Design & Development & other random crap is what I'll be blogging about here...

jQuery: Using jQuery to align column heights

Test Main Body

Right Column

Test Main Body

Right Column

Post new comment

General Categories

My Latest Tweets

Latest Posts

Recent Projects

Other places to find me...

Professional Drupal Development by Himerus Inc.