Make equal height columns by 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