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
Enjoyed the Article ?
Thanks for taking the time to debate this, I feel strongly about it and love studying more on this topic. If potential, as you achieve experience, would you mind updating your blog with further data? This can be very helpful for me.
Interesting article. Conversely I’m not convinced that I agree with many of the opinions expressed.
Oh man! I spent all day trying to find this info. I’m so happy that I’ve found your site.
I don’t suppose I’ve never learned anything like this before. So good to see somebody with some unique ideas on this subject. I really thank you for beginning it. This web site is something that is wanted on the web, somebody with somewhat originality.
Sweet blog! I found it while browsing on Yahoo News. Do you have any tips on how to get listed in Yahoo News? I’ve been trying for a while but I never seem to get there! Many thanks
Storage space pocket is found on the back end from the hands grasp.
Howdy! I know this is kind of off-topic but I needed to ask. Does managing a well-established blog such as yours take a lot of work? I am brand new to operating a blog but I do write in my diary everyday. I’d like to start a blog so I will be able to share my own experience and views online. Please let me know if you have any suggestions or tips for new aspiring bloggers. Thankyou!
Howdy! I realize this is kind of off-topic but I needed to ask. Does operating a well-established blog like yours take a large amount of work? I am completely new to running a blog but I do write in my journal daily. I’d like to start a blog so I can easily share my experience and feelings online. Please let me know if you have any suggestions or tips for brand new aspiring blog owners. Appreciate it!
hey there and thanks for your information ? I’ve certainly picked up something new from proper here. I did however experience several technical points the use of this web site, as I skilled to reload the website lots of times prior to I may just get it to load correctly. I had been wondering in case your web host is OK? Not that I am complaining, but slow loading instances instances will often have an effect on your placement in google and could injury your high-quality rating if ads and marketing with Adwords. Anyway I’m including this RSS to my e-mail and can look out for much extra of your respective interesting content. Ensure that you replace this once more very soon..
Wow, wonderful weblog layout! How lengthy have you been running a blog for? you made blogging glance easy. The overall glance of your site is excellent, let alone the content!
Other solutions use JavaScript to adjust the height of the columns. I'm not keen on this approach. Nice share
Aw, this was a very nice post. In thought I wish to write like this – taking time and precise effort to make a very good article is very rare…
That was clever. I’ll be stopping back.
Once I originally commented I clicked the -Notify me when new feedback are added- checkbox and now every time a remark is added I get 4 emails with the same comment. Is there any way you can remove me from that service? Thanks!
When I first commented I clicked on that link that says-’Notify me when new comments are added’- Check box right now every moment a new comment is added on I end up getting 3 messages having the precise same comment. Is there possibly any way you can get rid of me from that program? Thanks!
I got what you mean , thankyou for posting .Woh I am lucky to find this website through google. “Remember that what you believe will depend very much on what you are.” by Noah Porter.
Can i only point out what a comfort to locate somebody whom truly is aware of exactly what theyre talking about on the web. An individual definitely know how to offer an issue in order to lighting along with help it become essential. Further individuals should find out this kind of as well as understand this part of the story. My partner and i cant think about youre no longer frequent because you absolutely hold the surprise.
I am not sure where you’re getting your info, but good topic. I needs to spend some time learning more or understanding more. Thanks for wonderful information I was looking for this information for my mission.
Didn't work for me.. I am sure I did something wrong.. could you take a look??
Here is the link:
http://petphysicaltherapysandiego.com/link_pages/...
Thanks,
Claudia
Thank you realy
It’s good to read a blog with some new info. on this. I keep reading the same rehashed material. Thanks for the informative post.
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
I happen to be commenting to make you understand what a terrific encounter my wife’s daughter developed viewing your webblog. She mastered too many pieces, not to mention what it is like to possess a great giving style to let the others with ease learn a number of impossible subject matter. You truly surpassed people’s desires. Many thanks for churning out those warm and friendly, dependable, informative as well as easy thoughts on your topic to Tanya.
I like the valuable information you provide in your articles. I’ll bookmark your weblog and check again here frequently. I am quite sure I will learn many new stuff right here! Good luck for the next!
I know hard work it must were recommended to study for this publish.All things i can tell is merely maintain Creating this sort of publish we all like the idea.Plus the choices deliver some thing to your notice,I know of a number of blog providng your site seeing that source in this information.
Thanks for another wonderful article. The place else could anyone get that kind of info in such a perfect approach of writing? I’ve a presentation next week, and I am on the search for such info.
I really like what you guys tend to be up too. Such clever work and exposure! Keep up the good works guys I’ve included you guys to blogroll.
I like what you guys are up too. This kind of clever work and coverage! Keep up the great works guys I’ve you guys to my personal blogroll.
I really like what you guys tend to be up too. This kind of clever work and coverage! Keep up the wonderful works guys I’ve added you guys to our blogroll.
I love what you guys are up too. Such clever work and coverage! Keep up the wonderful works guys I’ve you guys to my own blogroll.
I am so happy at having read the above article. You must write more in the coming months. I shall be anticipating similar articles with avid interest. Hisako Mintreas