enavu webdevmania tutsvalley psdestination
visit the enavu network
12 Comments Article Title Overlay Article Title

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…

DZoneDiggDesign FloatDeliciousBlinklistRedditFacebookGoogle BuzzTwitterStumbleUponTumblrShare

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:

before

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:

after

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.

Related posts:

  1. Curtains Opening Animation with jQuery
  2. Making a nice jQuery content scroller with ease.
  3. Making a jQuery pagination system

Slobodan Kustrimovic

This author has yet to fill his BIO.

Did you absolutely LOVE this article... share it!

Comments

  • Great tip! I knew this was about to come up in a design I’ve been working so I’m excited the solution is right here.

    Thanks!

  • Glad to help :)

  • Hi there, resizing might introduce a little problem for some browsers. I am testing with latest Chrome and the text goes beyond the box when browser gets smaller. Could a onResize event be implementet perhaps? Another thing, why not make an outside DIV with display:block setting? wouldnt that do the trick too?

  • This is an excellent and very useful example, not to mention the value of you whole site.

    Keep up the great work.

  • I’m using Chrome v5 to implement this code, and both columns are being resized to 410px high, chopping a lot of content. Is there a fix for this?

  • well of course it is cutting content you are making the columns equal height! you can try oveflow:auto and it will add a scroller!

  • Actually it shouldn’t chop anything. The way i made it is to get the tallest column height and make the rest of the columns that height.
    James can you give me a link to the page so i can check it out.

  • Sure, the testing site is at:
    http://student.dc.lincoln.ac.uk/~u08107263/vilamaninga/index.htm

    So far I have only done testing in Chrome and FireFox

  • I have a problems with chrome too, is there a fix ?

  • Great jquery snippet.. Thanks

  • The problem is this script will find the tallest height and resize the columns but it doesn’t recalculate on browser resize. You can force it to recalculate by placing the script also inside a window.resize function.

    $(window).resize(function(){
    $(‘.equal_height’).height(biggestHeight);
    });

    Code not tested but i have used somthing like this on a few occasions.

    Hope that helps

Leave your own!

Sponsors

freedcamp free project management

Popular Articles

fzilla file hosting