Take the 2-minute tour ×

We created a very basic equal height function a while back that works great. However, we've been tasked with making the column heights resize as the window is resized. It's being implemneted into a responsive, fluid design. But the powers that be don't understand that the typical responsive use case isn't dragging your browser all over the place to accept specific break points.

Anyhow, got the markup and js setup in jsfiddle here. http://jsfiddle.net/J6uaH/3/

Just can't quite wrap my brain around adding the window resize element to the heights. Any help that anyone can provide will be hugely appreciated and would give whoever super hero bonus points, if there was such a thing!

share|improve this question
Your algorithm makes all the heights the same as each other. Why would resizing the page cause this to change? It's unclear from your question what the desired correct heights would be in which conditions (say the page gets taller or shorter). –  jimbojw Oct 15 '12 at 20:12
With the site being fluid (all percentage based widths), when you scale the window down, you end up with this: cl.ly/KA9r - However, after the paged is refreshed at that screensize, it's fine: cl.ly/KBBg - But the problem is, people requesting this want it to reconfigure the height as the window is resized –  Ryan Palmer Oct 15 '12 at 20:18
Great answers, folks! Here goes the super hero points to you all .... BOOOMMMM ZOOOMMMMM!!!!! –  Ryan Palmer Oct 15 '12 at 21:56
add comment

5 Answers

up vote 3 down vote accepted

why not just add an event listener to the resize event of the window that recalculates the height of the elements?

however because you already set a fixed height to the elements, you need to reset the height of both elements to get the new maximum size.

try adding:

    $('.group .module').css('height','auto');
    $('.group .module').equalHeight();

work in firefox. what this basicly does on every resize of the window:

  1. reset the height of the elements, meaning the browser will calculate it based on its content
  2. execute you function again to make both elements of equal height
share|improve this answer
I just ran into this issue with a reposonsive grid I am working on and this fits the bill. Thanks! –  Danny Englander Mar 6 '13 at 0:39
add comment

Personally, I'd solve this problem without resorting to JavaScript at all. If you're willing to add a little more HTML, you can achieve the desired visual effect with CSS alone.

Here's a JSFiddle: http://jsfiddle.net/Z59eT/2/

Basic strategy:

  1. Add an element with clear:both to the end of the group of modules --- this allows the group's height to be equal to the greater of the two modules.
  2. Give the group and module divs position:relative so they participate in positioning.
  3. Add special background elements into before each module --- these elements will grow vertically to match the size of the group, implementing the desired column colors.

I'm sure there are other pure-CSS ways of solving this problem. This is just the first that came to mind. Your real requirements may demand something with more nuance.

Whenever possible, it's better to let the browser do the work. In this case, rather than calculate heights it's better to let the browser handle it if you can since the browsers native capabilities will run orders of magnitude faster than interpreted JS code.

share|improve this answer
add comment

Issue is you are getting the larger height and then applying it to the boxes. However when you compare again, you are comparing the original boxes again, however it's the paragraph height that has changed.

$.fn.equalHeight = function() {
    var maxHeight = 0;
    return this.each(function(index, box) {
        var boxHeight = $(box).height();
        maxHeight = Math.max(maxHeight, boxHeight);

$(document).ready(function() {
    $('.group .module p').equalHeight();

    $(window).resize(function () {

share|improve this answer
But now you depend on child elements. What if I don't have any child elements? –  castillo.io Oct 15 '12 at 20:26
add comment

I just had to do this myself. I've used the setEqualHeight function in the past, but was 'requested' to make it work when somebody is resizing the window like crazy.

room13's fix is the key. Otherwise it just uses the old set height. You obviously call the same function on DOM ready as well. I do add a delay function for the window resize, so you only call it when your done, not constantly.


function setEqualHeight(columns) {
    var tallestcolumn = 0;
    function() {
        currentHeight = $(this).height();
        if(currentHeight > tallestcolumn) {
            tallestcolumn  = currentHeight;

var delay = (function(){
        var timer = 0;
        return function(callback, ms){
            clearTimeout (timer);
            timer = setTimeout(callback, ms);

$(window).resize(function() {
        $('.yourSelector').css('height','auto'); //solve for all you browser stretchers out there!
    }, 500);
share|improve this answer
add comment

It's worth noting that this is exactly what tables do. Example: http://jsfiddle.net/Z59eT/3/

A table with one row and two 50% columns will grow exactly as your specifications demand.

share|improve this answer
add comment

Your Answer


