css layout height issue with grid like layout

Question

So I have a large form and have grouped the like elements in fieldsets but all the fieldsets have different heights. I float the fieldsets to the left so any extra fieldsets will be pushed underneath (think the next row when reaching the edge of the screen).

How do I get all the field sets to have the same height as the tallest fieldset in that row?

fieldset {
    float: left;
    width: 278px;
    margin: 10px;
    height: inherit; 
    display: inline;
    border: 1px solid #000000;
}

This is somewhat working except the height issue. I don't want a true grid but a dynamic grid layout, so if someone with a 800x600 screen looks at the site and I have nine fieldsets on the page they should see something like a 3x3 grid. If you have a larger screen you might see something like a 5x4 grid.

Answer 1

Your going to have to make some choices, as this cant be done exactly the way you want using pure CSS. With Javascript you could make this work, but not pure CSS.

With that in mind. You could replace the fieldsets with scrollable divs to get a CSS only version of what you want (note the full contents of the div would not be displayed in all cases. The user may need to scroll). Example:

<style>
  div {
    float: left;
    width: 278px;
    margin: 10px;
    height: 100px; 
    border: 1px solid #000000;
    overflow: auto;
  }
</style>

You can try it out here

Finally the other choice would be to manipulate the height of the fieldsets using javascript after the elements have loaded.