set equal height on multiple divs

Question

I need to set equal height on a series of divs inside another div wrapper. The problem is that I dont want the same height on all of them. The page kind of have 3 columns an

Answer 1

Keep track of the widths and when they add up to the total width then resize the columns (keep track of which ones you've looked at OR how many might be easier) and then reset your currentTallest variable. So you'd be doing the resizing inside the loop every time you reached the end of the row.

Answer 2

Perhaps you can loop through the divs, and check for $(this).offset().top If offset().top isn't equal to the last offset, you know you're on a different row.

Answer 3

• EqualHeight.js - v1.0.1
• https://github.com/JorenVanHee/EqualHeight.js

this light weight plugin even support windows resize and responsive mode here is how to use:

$(window).load(function() {
$('.wrapper div').equalHeight({responsive: true});});

Answer 4

I went with somethin like Peter suggested. I rewrote the plugin to:

$.fn.cleverHeights = function(px) {
$(this).each(function(){
    var currentTallest = 0;
    var width = 0;
    var row = new Array();
    $(this).children().each(function(i){
        if ($(this).height() > currentTallest) { currentTallest = $(this).height(); }
        width += parseInt($(this).outerWidth(), 10);
        row[++row.length] = $(this);
        if (width > 900) {
            $.each( row , function() {
                $(this).css({'min-height': currentTallest});
                // for ie6, set height since min-height isn't supported
                if ($.browser.msie && $.browser.version == 6.0) { $(this).css({'height': currentTallest}); }
            });
            row.length = 0;
            width = 0;
            currentTallest = 0;
        }
    });
});
return this;
};

Thanks for the input

Answer 5

Since you are using jQuery, are you using the EqualHeights plugin?

http://www.cssnewbie.com/example/equal-heights/plugin.html

Seems like you would have some logic to know how many divs are in a row before hitting the page width, then starting a new div row with a ID. Then call

$('#custom-id').equalheights();

as many times as you need to, and that should set them all to the same height per ID.

You could build on that too by doing an each for divs in a row, and adding their width with .width().