Floating divs left, make all divs height equal the tallest div in it's row?

Question

I am attempting a design that would float a series of divs, all the same class, to the left. I want the divs to fit into rows, where in each row the divs are the same height so that there is no breakage between the rows and the design elements line up. Is there a way to make this happen, or do I essentially have to preset each div's height?

I'm floating to the left because I want the rows to be shorter if the browsers width is skinnier.

I think that's confusing. Attached is an image of what I'm trying to do.

Answer 1

There are three options as I see it:

State the height in your div style

Looks like the simplest answer, and since all divs (in the image) look to be the exact same height, this doesn't appear to be a problem to me:

div.class {
    height: 300px;
}

Create row containers

Create a container for each row of divs and define its height, then give each child div a height of 100%:

div.row-container { height: 300px; }
div.class         { height: 100%; }

Use a table

Don't be afraid to use the table element to display data in a tabular fashion. I am not sure how well your div semantically could be replaced with table rows and columns. But give it some thought as a potential candidate.

---

EDIT: I originally misunderstood, thinking you wanted to emulate the image exactly. My solutions are ones which assume a constant height (something you expressed a desire to possibly avoid). A counter-argument to that stance is that visually, rows which are all the same height are pleasing to the eye, and ultimately you want some control over how heigh your columns can be.

However it is possible to do exactly what you want, using no JS:

http://matthewjamestaylor.com/blog/equal-height-columns-5-column.htm

Answer 2

The answer is different depending on how you intend to implement it. If you're sticking with css 2, then the solution is either javascript (force all 'columns' to be the same height with javascript) or any of the multitude of methods for faking a column layout in css2. Here http://www.search-this.com/2007/02/26/how-to-make-equal-columns-in-css/ for example.

there is a css3 draft proposal to support multi column layouts. This is currently supported by most non-ie browsers (at least the most up to date versions). But youd be brave to put into a production environment if you value you're accessibility / dont have a fallback. See here http://www.w3.org/TR/css3-multicol/ for details.