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;
};
