CSS float align at top

Question

What is the best way (without js) to make all cells align (ie, have three cells per row in this case).

HTML

<ul id="list">
    <li>Line1 this is a very long line that will break the layout</li>
    <li>Line2</li>
    <li>Line3</li>
    <li>Line4 this is a very long line that will break the layout</li>
    <li>Line5</li>
    <li>Line6</li>
    <li>Line7 this is a very long line that will break the layout</li>
    <li>Line8</li>
    <li>Line9</li>
</ul>

CSS

#list li{
    float: left;
    width: 33%;
    border: 1px #000 solid;
}

Result

It can all be seen in this Fiddle.

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).

Answer 1

You can use vertical-align to ensure that the text of the blocks are always at the top regardless of height.

#list li {
  display:inline-block;
  vertical-align:top;
}

https://css-tricks.com/almanac/properties/v/vertical-align/