montrealmike montrealmike - 5 months ago 9
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/

Comments