title: How to make elements float all the way to the left again?
body: <p>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. <strong>note</strong>: I <em>did</em> do a search on css float on stack, but although some look like my problem, so far I haven't found a similar one. </p>
  
  <p>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 <code>&lt;li&gt;</code> item is different. In other words: the heighest <code>&lt;li&gt;</code> 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.</p>
  
  <p>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 <code>clear: both</code> to it and it will wrap. If I want to do the same thing in CSS then I can't without using poorly supported <code>:nth-of-type</code> 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.</p>
  
  <p>Who can help?</p>
  
  <p><img src="https://i.stack.imgur.com/ixbOA.png" alt="Screenshot from actual website design and flawed css floats"></p>