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

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 i开发者_开发问答n 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?

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

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.

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)