Css – Flowing box layout with different height

csslayout

I'm working on a site using MVC 1.0 (but will soon upgrade to 2.0).
The site has a top header and a number of boxes (UL elements) containing information beneath.
I would like to use the browsers whole width to take advantage of widescreen monitors so the number of boxes on each row shoulf depend on the width of the browser window.
The problem is that the boxes don't have a fixed height, the height depends on the content in each box.
The height of each row should be set by the largest box on that row.

What is the best way of doing this?
I hope my question makes sence, it's a bit hard to explain =)

Best Solution

I'm not sure this is possible using CSS only. However you can do this using Javascript.

Wrap your elements with a div and tehn set that div's height with javascript to the height of the bigger box.

<div class="box-wrapper">
  <div id="box1" class="a-box">
    <!-- content -->
  </div>
</div>
<div class="box-wrapper">
  <div id="box2" class="a-box">
    <!-- content -->
  </div>
</div>
<div class="box-wrapper">
  <div id="box3" class="a-box">
    <!-- content -->
  </div>
</div>

Then, do the following on jQuery's document ready:

var maxheight=$(".a-box").eq(0).height();
$(".a-box").each(function(){
  if(maxheight<$(this).height())
    maxheight=$(this).height();
});

$(".box-wrapper").height = maxheight;

Note: this code is not optimized at all, you should use variables instead of repeating selmectors and try not to use each, but a classic for loop instead.

Related Question