jQuery: Boxes of Equal Height

Ever had parallel boxes on a website you’re developing, and wanted them to have the same height, but still wanting them to have dynamic height, i.e. not having to lock them to a certain height in the CSS? I certainly have, and it’s usually difficult. But jQuery provides a simple sollution!

Say this is our starting point:

Two boxes, with different content, and thus different height. These two can quite easilly be made to have the same height, with a bit of jQuery magic. We start out by identifying them, adding a unique ID for each box. In this example I’ve simply called them #box1 and #box 2:

Then I utilize the following script, which will measure both boxes, find the one that is highest, and then apply that height to the shorter one:

<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function($){

	box1height = $('#box1').height();
	box2height = $('#box2').height();
	if(box1height>box2height){
	$('#box2').css('height', box1height);
	}
	else {
	$('#box1').css('height', box2height);
	}
});
</script>

The result will be this:

Easy as that!

Leave a Reply

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