Ok, so I have this code:
<div class='layout' style='width: 500px;'>
<div class='layout_frame' style='width: 300px;'></div>
<div class='layout_frame' style='width: 200px;'></div>
<div class='layout_frame' style='width: 100px;'></div>
<div class='layout_frame' style='width: 300px;'></div>
<div class='layout_frame' style='width: 100px;'></div>
</div>
Ok, so each DIV above is floated left, so what I get is two "rows" of DIV, the above row containing the first two, the second the three latter DIVs, right?
Ok, so each "layout_frame" can contain any content, so they will be of differing height, but I want the height to be equal WITHIN THE ROW. So the first two should perhaps both be 800px high, and the third latter should be, for example, 200px - based on the tallest DIV in the "row".
So I'm using jQuery position() to find out which ones that are in the same row, with this code:
var rows = new Array();
$("div.layout_frame").each(function(){
var pos = $(this).offset().top;
var height = $(this).height();
if (height > rows[pos]){
rows.pos = height;
}
});
But that's as far as I've come. I'm setting "pos" to, say "124" which should be equal for the first two and not for the last three. But each "group" of DIVS should have the same height, based on the tallest.
I really hope I explained this correctly. Any help is appreciated