19
Apr

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

Posted by Nouveller in CSS, jQuery

Equal Columns Tetris

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

<div id="left" class="column">
 
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.</div>
<!-- /column left -->
<div id="right" class="column">
 
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.</div>
<!-- /column right -->

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

<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript"><!--mce:0--></script>
 
<script type="text/javascript"><!--mce:1--></script>

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});
 
};

Author: Nouveller

My name is Benjamin Reid, I live in the UK and keep the magic locked into this site.

RSS Icon

Subscribe to the RSS feed some design goodness, get in on the upcoming software give-aways!

Digg Icon Share The simple way to get equal column heights using CSS and jQuery to Twitter Share The simple way to get equal column heights using CSS and jQuery to Delicious Share The simple way to get equal column heights using CSS and jQuery to Facebook

This entry was posted on Sunday, April 19th, 2009 at 6:14 pm and is filed under CSS, jQuery & tagged with , , , . You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Related post(s)

Comments left by other wizards

3 Responses | Make a comment

  • Photoshop Tutorials Blog wrote on June 15, 2009

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

    Reply

  • Cameron wrote on July 28, 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 July 29, 2009

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

      Reply

Leave your words of wisdom

Leave a Reply

This is a Gravatar

Your name