Balancing Columns – Making Two DIVs Equal Height using jQuery

arp14 jQuery, Tutorial Tags: , , , , , 1

Hi guys, you may have faced problem with Balancing Columns – making two DIVs equal height. Balancing columns with CSS is not possible. You can use JavaScript/jQuery to do that in very dynamic way. JavaScript can do the job pretty well, but I recommend to use jQuery to Balancing Columns more flexibly and in very short. You can use jQuery’s regular $(window).ready event. $(window).load will do the job but it’ll delay to balancing the columns height until the page id completely loaded. If you use $(window).ready event, make sure that you put the function at the bottom of external .js file. So, let’s do this.

Auto Balancing Columns without interval function

$(window).ready(function(){
	$('#div1').height() > $('#div2').height() ? $('#div2').height($('#div1').height()) : $('#div1').height($('#div2').height());
});

In the script above, I used short-hand form of if else statement. After everything get ready – If div1’s height is greater than div2’s height, then make div1’s height equal to div2’s height else make div2’s height equal to div1’s. But in this script if something happen in the page like append or prepend one or more element after the script finished running, then height of the divs will stays same. To avoid such issues, here is more updated more dynamic version of this script by using JavaScript’s inbuilt setInterval() function. It’ll update column heights on each 500 milliseconds no matter something appended or prepended to/from the page.

Auto Balancing Columns with interval function

setInterval(function() {balanceCols();}, 500);
function balanceCols(){
	$('#div1').height() > $('#div2').height() ? $('#div2').height($('#div1').height()) : $('#div1').height($('#div2').height());
}

Having problem with Balancing Columns? Just comment below, Thanks.

One thought on “Balancing Columns – Making Two DIVs Equal Height using jQuery

Leave a Reply

Note: Your email address will not be published. Required fields are marked *