How to make elements float all the way to the left again?

Question

I think this has been asked a million times, but with different definitions of the problem. And it's probably either easy to fix or a long lasting wish from web designers and still unanswered. note: I did do a search on css float on stack, but although some look like my problem, so far I haven't found a similar one.

What I'm trying to do will become clear if you see the attachment. I want them in rows of 3 neatly stacked under each other, where the height of each <li> item is different. In other words: the heighest <li> element in a row is leading, and the next row of items should wrap under this one. Right now the items on the new row bump into the content of a longer list item at the beginning, preventing the first item of the new row to fully float to the left.

Please note that I don't want to solve this with php or js, I think a pure css solution must be out there... Because with php, I could of course add a class like "new-row" to it and apply a clear: both to it and it will wrap. If I want to do the same thing in CSS then I can't without using poorly supported :nth-of-type stuff. Besides, the content block is variable in width, so sometimes there are 3 on a row and sometimes maybe only 2 or up to 6.

Who can help?

Answer 1

Use "display:inline-block" for LI, not "float:left"

Answer 2

use jQuery.

Pretty sure this is impossible using just CSS. Unless you're going to use absolute positioning and forget floats all together.

I hope I am wrong though! :)

(Would love to be able to do this w/ css)

Answer 3

I'm happy to be proven wrong, but I think you have to use tables for this, or a display: table-* construct. (I personally would go with tables - this is somewhat tabular data.)

Only table rendering can resize a whole row according to its tallest member's height.

It's the only way I can see to do this without JS or PHP.