Grow your CSS skills. Land your dream job.

Problem with Equal Height Blocks in Rows

  • # May 16, 2011 at 1:39 pm

    Hello. I love this Equal Height Blocks in Rows article so much so that I incorporated it into my template here http://www.deepbass.com/mt-test/

    It was mostly working quite well with a couple issues that follow but for some reason the second row of blocks is now adopting the height of the first row (as you can see I added a load of filler copy to test this). Any ideas as to why this might be happening?

    The other issues are; sometimes when the page loads the longest copy is spilling outside the bottom of the container slightly. In IE6 it takes interaction with something on the page like the expanding div example at the bottom to trigger the boxes to redraw to the right height.

    Any help would be greatly appreciated!

    # May 18, 2011 at 6:14 pm

    Anyone? This is driving me nuts.

    # May 18, 2011 at 11:17 pm

    It looks like the problem is that the “.equal” class is being used for equalizing instead of “.grid_3″ and “.grid_4″ separately.

    Also, you could try using the code below instead… it’s much more efficient and it’s from the jQuery map function page (last demo):

    $.fn.equalizeHeights = function(){
    return this.height( Math.max.apply(this, $(this).map(function(i,e){ return $(e).height() }).get() ) );
    }
    $('.grid_3').equalizeHeights();
    $('.grid_4').equalizeHeights(); // don't combine this line with the above, or all of the columns will have equal heights again.
    # May 21, 2011 at 2:59 pm

    Hey, thanks for that Mottie! That does look a lot more efficient. The only thing is that I thought Chris’ script made it so that you didn’t have to assign a unique class for each row you wanted to equalize which is part of the attraction. Also, I’m not sure if you noticed or not, there’s another set of boxes further down the page that are equalizing correctly to the height of their content independent from the first two rows as well as those in the footer.

    # May 22, 2011 at 6:22 pm

    OK, another strange turn of events. In my experimentation I simply added an “.equal” class to the next row, the “.grid_12″ rounded box that follows immediately after the first four equal “.grid_3″s, and everything works fine. In another experiment I added an additional row of “.grid_3″s with different height content right after the first 4 and everything worked fine. Why then, in its current state, are the first 4 “.grid_3″s affecting the row of 2 “.grid_4″s?

    It doesn’t make any sense.

    # May 24, 2011 at 3:03 pm

    OK, not sure what the problem is with this… but we still have the other issue with the content in the equal height blocks overflowing the containers because I don’t think the padding on the containers is being taken into account when the height calculation is being done.

    In one of the comments in the original article Tom says…

    “Use “outerHeight” instead to get the correct dimensions for elements with padding/margin.

    http://api.jquery.com/outerHeight/

    but I have no idea what would need to change in the original script for this to work.

    # May 26, 2011 at 10:56 am

    Hi Fatbat!

    Hey sorry about not getting back to you… been busy with other stuff. Try this… basically I changed the “topPosition” from getting the “position” to getting the “offset” which makes a difference when the page is taller than the window.

    // equal columns
    var currentTallest = 0,
    currentRowStart = 0,
    rowDivs,
    $el,
    topPosition = 0;
    $('.equal').each(function() {
    $el = $(this);
    topPosition = $el.offset().top;
    if (currentRowStart != topPosition) {
    // we just came to a new row, set all the heights on the completed row
    if (rowDivs) { rowDivs.height(currentTallest); }
    // set the variables for the new row
    rowDivs = $el; // start new row
    currentRowStart = topPosition;
    currentTallest = $el.height();
    } else {
    // another div on the current row, add it to the list and check if it's taller
    rowDivs = rowDivs.add($el);
    currentTallest = Math.max(currentTallest, $el.height());
    }
    // do the last row
    if (rowDivs) { rowDivs.height(currentTallest); }
    });

    I’ll work on making this into a plugin soon too :P

    # May 31, 2011 at 12:42 pm

    Sorry, hadn’t checked back for answers for a few days. Thanks for this Mottie! I’ll give it a try and report back asap.

    # May 31, 2011 at 2:28 pm

    OK, so that seems to have fixed the problem with the random row of columns further down the page taking on the height of the first row of columns, which is great.

    All that’s left now is the random overflowing of the content in the .even boxes. Sometimes it’s fine, sometimes it’s not and hitting reload produces different results.

    # May 31, 2011 at 4:38 pm

    Ok so now try to change the height to outerHeight or just remove the margin and padding from the “.equal” class.

    Change

    $el.height();

    to

    $el.outerHeight();

    # June 5, 2011 at 8:06 am

    I need to check back more often. Thanks for your help Mottie.

    Adding the outer height doesn’t solve the problem though, it still sometimes works properly and sometimes doesn’t. Loading the page might work fine the first time, reloading the page might produce an overflow 5 times in a row, and the 6th reload it goes back to working properly… or vice versa. I’m not sure why this is? I also can’t think of an easy way to take the margin and padding off the “.equal” class.

    # June 5, 2011 at 9:11 am

    Hi Fatbat!

    Actually after double checking, innerHeight would be more appropriate and I think that maybe you didn’t change both heights in the code? Try this:

    // equal columns
    var currentTallest = 0,
    currentRowStart = 0,
    rowDivs,
    $el,
    topPosition = 0;
    $('.equal').each(function() {
    $el = $(this);
    topPosition = $el.offset().top;
    if (currentRowStart != topPosition) {
    // we just came to a new row, set all the heights on the completed row
    if (rowDivs) { rowDivs.height(currentTallest); }
    // set the variables for the new row
    rowDivs = $el; // start new row
    currentRowStart = topPosition;
    currentTallest = $el.innerHeight();
    } else {
    // another div on the current row, add it to the list and check if it's taller
    rowDivs = rowDivs.add($el);
    currentTallest = Math.max(currentTallest, $el.innerHeight());
    }
    // do the last row
    if (rowDivs) { rowDivs.height(currentTallest); }
    });
    # June 5, 2011 at 10:04 am

    Hi Mottie. Yeah, I did change the heights in both places. outerHeight and innerHeight produce similar results in that the box still has variable results when you load the page and hit reload over and over again. innerHeight produces a taller box when it’s working correctly, but when it overflows the result is the same visually. With outerHeight the script calculates the correct height of the first tall equal box at 1701px and when it calculates the wrong height it’s 1596px. With innerHeight the script calculates the correct height at 1741px and the wrong height at 1636px.

    When an incorrect result happens, only the first two rows of “.equal” blocks overflow, the last row is shorter than it’s supposed to be but doesn’t overflow (it’s just missing it’s bottom padding). This is sort of like the first problem that affected only the first two rows leaving the third row functioning correctly.

    Any thoughts? I’ve uploaded the current iteration using outerHeight which when producing the right result is the most visually correct representation of the padding.

    # June 5, 2011 at 10:22 am

    Something else that I have noticed… it seems the calculations work on the first load of the page and reloads cause the overflow. Forcing a refresh produces the correct result and then a reload breaks it again.

    # June 5, 2011 at 10:45 am

    Oh, and for the record, I did try removing all padding and margin from the “.equal” items and the variable result still happens.

Viewing 15 posts - 1 through 15 (of 27 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".