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

Posted on

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.

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. 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. 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

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

  • Cameron wrote on

    A quicker way to do this without IF statements:

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

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

    • Nouveller wrote on

      Thanks for that Cameron, seems a lighter way to do it!

  • ColdFusion Developer wrote on

    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?

  • Pingback: Graphics, vb.net, coding, PHP, MySQL, snippets, 3D Graphics and more!

  • Laverne Vasques wrote on

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

  • Pingback: coding forum

Add your comment

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>