Question

Possible Duplicate:
CSS – Equal Height Columns?

I have 3 divs.

Like this:

<div class="features"></div>
<div class="features"></div>
<div class="features"></div>

They are going to be filled with text. I’m not sure how much. The thing is, it’s imperative that they are all equal heights.

How can i use jQuery (or CSS) to find the tallest of the DIV’s and set the other two to the same height, creating 3 equal height DIV’s.

Is this possible?

Answer 1

You can’t easily select by height or compare in CSS, but jQuery and a few iterations should easily take care of this problem. We’ll loop through each element and track the tallest element, then we’ll loop again and set each element’s height to be that of the tallest (working JSFiddle):

 $(document).ready(function() {
   var maxHeight = -1;

   $('.features').each(function() {
     maxHeight = maxHeight > $(this).height() ? maxHeight : $(this).height();
   });

   $('.features').each(function() {
     $(this).height(maxHeight);
   });
 });

[Addendum]

Sheriffderek has crafted a JSFiddle for this solution in a responsive grid. Thanks!

[Version 2]

Here is a cleaner version using functional programming:

$(document).ready(function() {
  // Get an array of all element heights
  var elementHeights = $('.features').map(function() {
    return $(this).height();
  }).get();

  // Math.max takes a variable number of arguments
  // `apply` is equivalent to passing each height as an argument
  var maxHeight = Math.max.apply(null, elementHeights);

  // Set each height to the max height
  $('.features').height(maxHeight);
});

[Version 3 – sans jQuery]

Here’s an updated version that doesn’t use jQuery (working JSFiddle):

var elements = document.getElementsByClassName('features');

var elementHeights = Array.prototype.map.call(elements, function(el)  {
  return el.clientHeight;
});

var maxHeight = Math.max.apply(null, elementHeights);

Array.prototype.forEach.call(elements, function(el) {
  el.style.height = maxHeight + "px";
});

(and here it is in ES6)