Make equal height columns by jQuery

September 18, 2011 Filed under: jQuery

We use equal height column layout in web page a lot. If we have to use pure CSS, probably we would give the column container a repeat-y background image( like the image below) to make the columns look with equal height.

In this case, the columns do not really have equal height, but look in that way with the background image. If you want change the column’s background, border, spacing, etc., you will have to edit the background picture. It’s sort of annoying, especially for UI. However, with a little help from jQuery, we can get equal columns easily.

Two columns layout


If there are only 2 columns, the first idea comes in my mind is getting the 2 floating block’s height and compare, then, give the shorter block the bigger value.

HTML Code
<div class="columnContainer">
<div class="left">...</div>
<div class="right">...</div>
</div>
jQuery Code
 $(document).ready( function(){
   var leftHeight = $(".left").height();
   var rightHeight = $(".right").height();
       if (leftHeight > rightHeight){ $(".right").height(leftHeight)}
          else{ $(".left").height(rightHeight)};
 })

Click here to see the demo page

Multi columns layout

If there are 3 columns or even more, how can we do it? We can simply use map() to get the columns height array, then, get the max value of the array and give the value to each column’s height.

HTML Code
<div class="columnContainer">
<div>...</div>
<div>...</div>
<div>...</div>
<div>...</div>
</div>
jQuery Code
 $(document).ready( function(){
   var heightArray = $(".columnContainer>div").map( function(){
			 return  $(this).height();
		 }).get();
   var maxHeight = Math.max.apply( Math, heightArray);
   $(".columnContainer>div").height(maxHeight);
	 })

Click here to see the demo page

Multi columns layout with dynamic content

How about the column’s content is dynamic? Such as it has a hiding block which will show up after a click, will the action break the layout? Let’s define a function and call it in the click action to slove the problem.

<script  type="text/javascript">
 $(document).ready( function(){
	function equalHeight(){
		var heightArray = $(".columnContainer>div").map( function(){
				 return  $(this).height();
				 }).get();
		var maxHeight = Math.max.apply( Math, heightArray);
		$(".columnContainer>div").height(maxHeight);
			}

	equalHeight();

	$("a.showLink").click(function(){
			$("#hide").show();
			$(".columnContainer>div").removeAttr("style");
			equalHeight();
			});

		 })
</script>

Click here to see the demo page

Multi Containers with eauql columns layout with dynamic content

What if there are more than one Container which has equal columns inside? And each container has dynamic content? We could use .each() function to get equal column layout there.

<script  type="text/javascript">
 $(document).ready( function(){
	function equalHeight(obj){
		var heightArray = obj.children("div").map( function(){
				 return  $(this).height();
				 }).get();
		var maxHeight = Math.max.apply( Math, heightArray);
		obj.children("div").height(maxHeight);
		                	}

	$(".columnContainer").each( function(){
				equalHeight( $(this));
										   })

	$("a.showLink").click(function(){
			$(this).parents().children("span").toggle();
			$(this).parents(".columnContainer").children().removeAttr("style");
			equalHeight( $(this).parents("div"));
			                      });
					       	 })
</script>

Click here to see the demo page

{12 Comments}

  1. Nerice Says:

    Woah nelly, how about them alppes!

  2. Christina Hooper Says:

    I LOVE your code. It’s the first code like it that I’ve been able to implement successfully. My only problem is that it doesn’t reset on the next row.

    For example, in your layout, if you add another ‘columnContainer’ with divs inside it, all the div elements will reset to the tallest of them all and not the tallest in that row.

    Do you have any idea how to fix this?

  3. Jessie Says:

    I added the code for multi “column container” code in the post.

  4. Epik Says:

    Very nice piece of code there i like it. Plain and simple and to the point. Gets the job done very well.

    Thank you for providing a nice dynamic piece of script here. i have bookmarked the site :)

  5. Miguel Says:

    Nice script i tested it but has problems with responsive layouts while the width adapts the length does not i would suggest a $(window).resize(function () { also

  6. zenuddin Says:

    thank you, Tested and work 100%

  7. Abzoozy Says:

    Thanks for the code ;) I am new to jquery but it’s amazing :) thanks

  8. Daniel Codrea Says:

    Nice script. Works great!

  9. Ravinder Says:

    Sorry, if I Sound stupid in asking this. Iam trying to setup my first blog and not familiar with html,css java etc. My blog is on blogger.Template is Awesome inc. my blog has a header,footer,sidebar left and sidebar right(right sidebar is branched into sidebar right-1,2, and 3) and the main post.
    I want the post,sidebar left and sidebar right to stretch fully from header to footer.I dont know where to put the codes and what codes.Please explain. sent you an email too,hope you reply.Thanks

  10. pallavi zanje Says:

    Hi,

    Very nice code.

  11. modus operandi Says:

    hey buddy, this is a really fascinating write-up

  12. tayf Says:

    very good thanks for code.. tThank you very much for this!

Leave a Reply

IMPORTANT!

To be able to proceed, you need to solve the following simple math (so we know that you are a human) :-)

Please leave these two fields as-is:

© All right reserved by Jessie Su. Powered by WordPress