title: CSS float align at top
body: <p>What is the best way (without js) to make all cells align (ie, have three cells per row in this case).</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;ul id="list"&gt;
      &lt;li&gt;Line1 this is a very long line that will break the layout&lt;/li&gt;
      &lt;li&gt;Line2&lt;/li&gt;
      &lt;li&gt;Line3&lt;/li&gt;
      &lt;li&gt;Line4 this is a very long line that will break the layout&lt;/li&gt;
      &lt;li&gt;Line5&lt;/li&gt;
      &lt;li&gt;Line6&lt;/li&gt;
      &lt;li&gt;Line7 this is a very long line that will break the layout&lt;/li&gt;
      &lt;li&gt;Line8&lt;/li&gt;
      &lt;li&gt;Line9&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>#list li{
      float: left;
      width: 33%;
      border: 1px #000 solid;
  }
  </code></pre>
  
  <p><strong>Result</strong></p>
  
  <p><img src="https://i.stack.imgur.com/087iO.png" alt="enter image description here"></p>
  
  <p>It can all be seen in <a href="http://jsfiddle.net/mctu7/" rel="noreferrer">this Fiddle</a>.</p>
  
  <p>The number of items per line may change (ie, I don't know where the new line will start), and the height of each is variable (ie, cannot force height).</p>