Helping you build a better website
(and other interesting web stuff)

CSSHTMLJavaScriptjQueryMSSQLMySQLPHPSilvaTechnologiesWordpress
Silva Web Designs - Blog

How to Create Equal Height Elements / Columns

In this simple tutorial, we’re going to show you how you can set all elements with a particular class to the highest element height. To do this, we need to loop through all elements with a particular class, get the highest value, then match all other elements to the same height. We can do this using jQuery as follows:


var maxHeight = 0;

$(".some-element").each(function(){
   if ($(this).height() > maxHeight) { maxHeight = $(this).height(); }
});

$(".some-element").height(maxHeight);

Awesome, we now have set all elements to the same height. We can take this one step further as elements can change in max height when you are shrinking the browser width for example. What we can do here is use the resize function to update the values.

To make things easier, we can create a function, then call the function both on page load and within the resize function as follows:


var maxHeight = 0;

function matchMaxHeight() {
	$(".some-element").each(function(){
	   if ($(this).height() > maxHeight) { maxHeight = $(this).height(); }
	});

	$(".some-element").height(maxHeight);
}

matchMaxHeight();

$(window).resize(function() {
	matchMaxHeight();
});

Pretty straightforward right?

If this tutorial as helped you or if you need some further explanation on the above code, feel free to drop us a comment below and we’d love to assist you.

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development and web site design. His expertise is WordPress & Magento as well as many other frameworks. Would you like to work with Nathan? Send him an email on [email protected]

It’s good to share

Join the discussion