The simple way to get equal column heights using CSS and jQuery

Posted on April 19, 2009

With the recent popularity of multiple column layouts, and constantly changing content that can alter the height of a column from minute to minute - it has become a bit of a mess trying to make everything look nice and balanced. So here's how to use jQuery to make it real simple.

Download the demo

View the demo

Build a basic two column layout

Lets start with your standard two column layout. Also let's pretend our column on the left has some sort of content that's updated with a CMS or an RSS feed. This will want to go into your <body>.

HTML

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

CSS

.column { width: 250px; float: left; padding: 10px; overflow:  hidden; margin: 0 10px 0 0; }

#left { background-color: #410323; border: solid 1px #5E0F38; }

#right { background-color: #2A0329; border: solid 1px #651A63; }

You should now have two columns sitting next to each other but our left column will be a lot longer than the right.

The classic error

Adding the jQuery

First lets include the jQuery from Google and get our document ready for some jQuery magic, make sure this is in the <head>.

HTML

Focus in on the script

Rights lets now add our script in. First we are going to create a variation called columnHeight, this variation selects <div class="column" id="left"> and then runs a function called height() which gets the height of the selected element.

$(document).ready(function(){

	var columnHeight = $("div#left").height();

});

Now we've got our value of our longest column set into a variable we can use, we need to apply it using the wonderful css() function. The new bit of code we've added does the following - selects the <div class="column" id="right">, runs the css() to change it's height based on our variable columnHeight.

$(document).ready(function(){

	var columnHeight = $("div#left").height();

	$("div#right").css({'height' : columnHeight});

});

Voila! Equal columns in minutes.

It's fixed, woop!

You can also extend this by letting jQuery work out which column is the longest and then changing the shortest columns height to the longest.

var columnRight =  $("div#right").height();
 
var columnLeft = $("div#left").height();

if (columnLeft > columnRight) {

	$("div#right").css({'height' : columnLeft});
	
} else { 

	$("div#left").css({'height' : columnRight});
	
};

7 comments

Photoshop Tutorials Blog wrote on 15th June 2009

That was really useful! JQuery is quickly becoming one of the most important tools for a webdesigner! =)

Reply
Cameron wrote on 28th July 2009

A quicker way to do this without IF statements:

var rh = $(“#right”).height();
var lh = $(“#left”).height();

$(‘#right, #left’).height(Math.max(rh, lh));

Reply
- Nouveller wrote on 29th July 2009
  
  Thanks for that Cameron, seems a lighter way to do it!
  
  Reply
ColdFusion Developer wrote on 29th July 2011

What happens if you have an ajax request which changes the DOM and makes one of the columns longer after the $(document).ready() has already fired?

Reply
Pingback: Graphics, vb.net, coding, PHP, MySQL, snippets, 3D Graphics and more!
Laverne Vasques wrote on 1st March 2012

Perhaps you can publish up coming submit discussing much more aspect concerning this article. I have to continue reading aspects of the idea!

Reply
Pingback: coding forum