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 going filled text. i'm not sure how much. thing is, it's imperative equal heights.

how can use jquery (or css) find tallest of div's , set other 2 same height, creating 3 equal height div's.

is possible?

you can't select height or compare in css, jquery , few iterations should take care of problem. we'll loop through each element , track tallest element, we'll loop again , set each element's height of 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 solution in responsive grid. thanks!

[version 2]

here cleaner version using functional programming:

$(document).ready(function() {   // array of element heights   var elementheights = $('.features').map(function() {     return $(this).height();   }).get();    // math.max takes variable number of arguments   // `apply` equivalent passing each height argument   var maxheight = math.max.apply(null, elementheights);    // set each height max height   $('.features').height(maxheight); }); 

[version 3 - sans jquery]

here's updated version 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 in es6)