CSS float align at top

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