Code Snippet

Home » Code Snippets » jQuery » Equalize Heights of Divs

Equalize Heights of Divs

var maxHeight = 0;

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

$("div").height(maxHeight);

Subscribe to The Thread

  1. Sgobin

    I don’t know why. it work offline but when I put the site to the server it make the height small than the content. And sometimes it change the height with browsers reload in Safari or Firefox.

    Reply ↓
  2. Michael Hogenmiller

    Interestingly enough, I experienced the same issue. Worked great on the hard drive, but when I uploaded the files to the server, for some reason the script didn’t work in the same manner. It actually set the height for each div to the height of the first.

    Reply ↓
  3. Josh

    this is sooo good! thank you!

    Reply ↓
    • Josh

      …actually I do have a small question. How do you implement this on multiple divs?

      for example I have 3 sets of 2 divs on a page. I only want the sets to equalize, not all divs on the page. I don’t mind the using multiple classes but whats the shortest way to write it.

      div.equalize-1, div.equalize-2, div.equalize-3 are my classes.

      I assigned these classes to each set of divs I want to be equalized.

      Any tips would be great thanks.

  4. Chris
    // Plugin
$.fn.equalize = function() {
	var maxHeight = 0;

	return this.each(function(){
		var $this = $(this);

		if ($(this).height() > maxHeight) { maxHeight = $(this).height(); }

		$this.height(maxHeight);
        });
};

// Use generic class
$('.equalize').equalize();

OR

$('div.equalize-1, div.equalize-2, div.equalize-3').equalize();
    Reply ↓
    • Chris

      Woops, gotta replace the following line:

      if ($this.height() > maxHeight) { maxHeight = $this.height(); }

      Forgot to use the “$this” var!

  5. Toby Stokes

    Your plugin version doesn’t work quite right I think – it appears to be applying the current maxHeight BEFORE it has looped through all the selectors, so its only correct for things after the tallest one.
    The original version is fine, though

    Reply ↓

Speak, my friend

At this moment, you have an awesome opportunity* to be the person your mother always wanted you to be: kind, helpful, and smart. Do that, and we'll give you a big ol' gold star for the day (literally).

Posting tips:
  • You can use basic HTML
  • When posting code, please turn all
    < characters into &lt;
  • If the code is multi-line, use
    <pre><code></code></pre>
Thank you,
~ The Management ~