65

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?

Community
  • 1
  • 1
benhowdle89
  • 36,900
  • 69
  • 202
  • 331

3 Answers3

199

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)

hayesgm
  • 8,678
  • 1
  • 38
  • 40
  • 2
    RAD. This just made my day. Here is a forked fiddle that shows it in a responsive grid. http://jsfiddle.net/sheriffderek/76Rsh/ – sheriffderek Apr 02 '13 at 18:56
  • @cmegown - It worked on my fiddle and my codepen and then when I put it into practice on a WordPress site, It was only working 70% of the time. I think I am loading things in the wrong order, or that maybe fitvids.js is somehow conflicting... But I'm glad it worked for you! I need to figure this out! It's really necessary for responsive grid layout! – sheriffderek Apr 11 '13 at 21:43
  • you can also use `maxHeight = Math.max( maxHeight, $(this).height() );` inside of `each()`. – Pierre Apr 20 '13 at 15:06
  • 6
    The second loop can be simplified to `$('.features').height(maxHeight);` – Tom Sep 06 '13 at 15:46
  • 1
    i know this is kinda old, but may i ask why do you initialize maxHeight in -1? – DJ22T Feb 03 '14 at 15:44
  • 1
    Here it is a year later, and I'm back to this same question. Wondering about `$(window)resize();` - only works the first time, and the -1 is still a mystery. Lets see what I learned this year, and if I can tune this up a bit. – sheriffderek Apr 17 '14 at 18:06
  • Used above code with `$(document).resize(function()` very nice. – LpLrich Mar 09 '15 at 21:09
  • 1
    If you have responsive grids or columns of things and need equal height items in row... http://codepen.io/sheriffderek/pen/aOLqGX – sheriffderek Jul 20 '16 at 00:41
  • I'd also most likely do equal columns with flex-box as of this date: https://jsfiddle.net/sheriffderek/eqmeu5wb/ – sheriffderek Jul 20 '16 at 01:06
  • Thank you, this is a great solution, applies easily. Why do you use -1 in maxHeight. I just declared it without value and it still works. Can someone explain if this -1 is must and why. – Usce Jul 20 '17 at 23:37
3

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);
        }
   }
  });
frontendzzzguy
  • 3,242
  • 21
  • 31
kleinohad
  • 5,800
  • 2
  • 26
  • 34
0

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.

Grigor
  • 4,139
  • 10
  • 41
  • 79