title: CSS Boxes: float: left, but start from the left when jumping into the next line
body: <p>I have got a couple of boxes containing text which should be displayed next to each other. They all have a fixed width, but a variable height (depending on their content). They are inside of a container with a variable width.</p>
  
  <p>If there are too many boxes I want them to jump into the next line and start from the left again. I realized this using left floated boxes. This causes a problem if the first box per line is higher than the next one, because then the ones from the new line won't start from the left. Here's a demo:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;section&gt;
      &lt;article&gt;One: This ​​​​text is so long, it's so long oh my gosh!&lt;/article&gt;
      &lt;article&gt;Two&lt;/article&gt;
      &lt;article&gt;Three: bla bla bla bla bla bla bla bla&lt;/article&gt;
      &lt;article&gt;Four&lt;/article&gt;
  &lt;/section&gt;​
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>section{
      width: 300px; /* For demo, this can vary */
      overflow: hidden;
  }
  article{
      float: left;
      width: 100px;
      background: #dddddd;
      padding: 10px;
      margin: 10px;
  }
  ​
  </code></pre>
  
  <p>You can also have a look at this JSFiddle, where you can see the problem immediately: <a href="http://jsfiddle.net/dwr6K/" rel="nofollow">http://jsfiddle.net/dwr6K/</a> Box "Three" starts right from Box "One", although I'd like it to start in the new line under Box "One". Sadly I can't use <code>clear: left</code> because I don't know how many boxes will fit in a line.</p>
  
  <p>Is there a way to prevent this and to display it the way I'd like to?</p>