Equal Column Height with jQuery

In this tutorial i will show you how to achieve equal height on multiple columns. There are a lot of ways to achieve this, one of them is with CSS but with jQuery it’s peace of cake. Here is how…

So how are we gonna do that?

Really easy. The columns we want to make equal in height will have same CLASS (in this tutorial that’s gonna be equal_height). The jQuery will simply check all of them and their’s height and get the height of the tallest column, and that height will be set to the other columns. That’s gonna make them all equal height… Let’s make one example with 2 columns.

HTML

<div id='first' class='left equal_height'>
	<p>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</p>
</div>

<div id='second' class='left equal_height'>
	<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.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.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.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.</p>
</div>

As you can see in this example we have 2 columns where the second one has more content which makes it bigger.

CSS

.left { float:left; }
#first { background : #ccc; width:70%;}
#second { background: #eee; width:30%;}
.equal_height p{ padding:10px;  }

No need to explain the CSS it’s just for styling purposes, it’s not involved in the process of making equal height. And this is what we got:

Let’s make them equal…

jQuery

$(document).ready(function(){
	//set the starting bigestHeight variable
	var biggestHeight = 0;
	//check each of them
	$('.equal_height').each(function(){
		//if the height of the current element is
		//bigger then the current biggestHeight value
		if($(this).height() > biggestHeight){
			//update the biggestHeight with the
			//height of the current elements
			biggestHeight = $(this).height();
		}
	});
	//when checking for biggestHeight is done set that
	//height to all the elements
	$('.equal_height').height(biggestHeight);

});

And that’s it. Peace of cake. This is what we got:

Don’t Forget

If you want you can subscribe to TutsValley RSS Feed or follow us on Twitter to be informed when a new tutorial comes out. Thank you.