Use jQuery/CSS to find the tallest of all elements

> 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?

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)

you can use jquery each function:

var highest;
var first = 1;
$('.features').each(function() {
   if(first == 1)
   {
        highest = $(this);
        first = 0;
   }
   else
   {
        if(highest.height() < $(this).height())
        {
              highest = $(this);
        }
   }
  });

You may do three column div, but you gotta add wrapper around it like this

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

in head tags put this

<style type="text/css">
#wrapper {
  position:relative;
  overflow:hidden;
}

.features {
  position:absolute;
  float:left;
  width:200px; /* set to whatever you want */
  height:100%;
}
</style>

whatever one of the boxes width is, the others will get the same too. Hope this helps. I am sorry if it doesn't, I just made the code on the spot.