montrealmike montrealmike - 1 year ago 48
CSS Question

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

enter image description here

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

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;
}

http://css-tricks.com/2597-what-is-vertical-align/