How to make equal height divs/coloumns
Learn how to create equal heighted coloumns/divs using jQuery and simple javascript.
What is it all about ?
Problem
How many times have you tried to make equal heighted divs and ended up with something like the following image ?
Unequal Divs are always a problem
Result
Well fear not, this simple how to will help you make the above unequal divs into equal heighted divs into the following.
This is what I am talking about...
Equal Height Coloumns/Div Using jQuery
So how are we going to achieve this ? Very simple, jQuery + a small snippet of code. In any web development project, this snippet can be used. It is also compatible with Microsoft’s Internet Explorer.
equalheight.js – JQuery Equal Height Plugin
/*--------------------------------------------------------------------
* The following source code is a modified version of the original plugin "EqualHeights" for jQuery.
*
* JQuery Plugin: "EqualHeights"
* by: Scott Jehl, Todd Parker, Maggie Costello Wachs (http://www.filamentgroup.com)
*
* Copyright (c) 2009 Filament Group
* Licensed under GPL (http://www.opensource.org/licenses/gpl-license.php)
* JQuery Plugin : "EqualHeights-Light"
* Modified by : Michael (http://www.webdevcodex.com)
* Description : Does not use px-em dependencies based from the original version. Also fixes a small bug which does not allow divs to be of equal heights if there are more than 2 divs.
------------------------------------------------------------------------*/
jQuery.fn.equalheight = function() {
jQuery(this).each(function(){
var currentTallest = 0; //create currentTallest var
//go through every child of the mother div
jQuery(this).children().each(function(i){
//keep checking every child's height and get the height of the tallest div
if (jQuery(this).height() > currentTallest) { currentTallest = jQuery(this).height(); }
});
//set currentTallest as pixels
currentTallest = currentTallest+"px";
//If browser is Microsoft Internet explorer, then use css "height: yypx"
if (jQuery.browser.msie && jQuery.browser.version == 6.0) { jQuery(this).children().css({'height': currentTallest}); }
//use css "min-height: yypx"
jQuery(this).children().css({'min-height': currentTallest});
});
return this;
};
How to use ?
-
Download the plugin/snippet
Download the above code and save it as
equalheight.js -
Include jQuery and the plugin
Include the above file along with
jQueryin the<head>...</head>section of your file.<script src="jquery-1.3.2.min.js" type="text/javascript"></script> <script src="equalheights.js" type="text/javascript"></script> -
Wrap all your divs inside a another div
Just create a new div
<div id="equalheight"></div>and put all the divs you want to have equal heights, inside this newly created div.<div id="equalheight"> <div id="yourdiv1" style="float:left">...</div> <div id="yourdiv2" style="float:left">...</div> <div id="yourdiv3" style="float:left">...</div> </div> -
Finally, let javascript do all the stuff
Now that you are all set, let Javascript do the rest. Simple write a small call to our new snippet.
$(the_mother_div).equalheight();.The
the_mother_divin our case would be#equalheight.Just include the following code inside the
<head>...</head>$(document).ready(function(){ $("#container").equalheight(); });
Conclusion
Like always, if you have any doubts, do post a comment here. Cheers
About the Author
Enjoyed the Article ?
Thank for this nice little mod, you just saved my day.Works like a charm
Hey Micheal.. nice article.. But you can even do this with ‘Nifty Cubes’
http://www.html.it/articoli/niftycube/nifty7.html
Hey Amey,
“Nifty Cubes” is just one of the many ways of achieving this.
This tutorial is more on how one can write their own scripts using javascript libraries like jQuery, and helps em understand how it works