Dfyjkt

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 and the floating divs can be 1, 2 or 3 columns wide. The divs float left, so the following example will give me three rows of divs in my wrapper. How can I set equal height on the divs that are in the same row? In my example I want nr 1 and 2 to have equal height and 3, 4 and 5 another equal height? I cant know beforehand how many divs there is or how wide or high they are. Edit: They can be for instance 300, 600 or 900 px wide and the page width is 900px

<div id="wrapper">
 <div class="one-wide">nr1</div>
 <div class="two-wide">nr2</div>
 <div class="one-wide">nr3</div>
 <div class="one-wide">nr4</div>
 <div class="one-wide">nr5</div>
 <div class="three-wide">nr6</div>
</div>

Im thinking I somehow need to figure out when the added width of the divs is at the full page width and set equal height on those. Then do the same on the next divs. But I cant wrap my head around it. Currently im just using this to set the height on the children of the wrapper:

$.fn.equalHeights = function(px) 
$(this).each(function()
 var currentTallest = 0;
 $(this).children().each(function(i)
 if ($(this).height() > currentTallest) currentTallest = $(this).height(); 
 );
 // for ie6, set height since min-height isn't supported
 if ($.browser.msie && $.browser.version == 6.0) $(this).children().css('height': currentTallest); 
 $(this).children('div').css('min-height': currentTallest); 
);
return this;
;

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.

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().

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.

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

• 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););