HTML: Make List Flow with CSS

Xah Lee, 2010-03-03, 2011-07-07

This page is a html/css tutorial, showing you how to format list items.

By default, list items are formated like this:

Cat
Dog
Bird

Here's the code:

<ul>
<li>Cat</li>
<li>Dog</li>
<li>Bird</li>
</ul>

This is plain. Sometimes you have a list of items, but you want them displayed in different format.

Flowing List Items

For example, if you want it to flow like this:

Cat
Dog
Bird

Solution

Here's the HTML code:

<ul class="myflow">
<li>Cat</li>
<li>Dog</li>
<li>Bird</li>
</ul>

<hr style="visibility:hidden; clear:both">

Here's the CSS code:

ul.myflow li {
float:left;
list-style-type:none;
margin:1ex;
border:solid thin red}

The trick to make it flow is the float:left. The float means making the content float, and when there are several content that are all floating, they flow in the same way when you have a sequence of inline images (i.e. a sequence of <img …> tags.).

Removing Lisp Bullets

To remove the default bullets, we use list-style-type:none.

Stop Flowing

At the end of list, we added this:

<hr style="visibility:hidden; clear:both">

This is because we want to stop the flowing behavior. If we don't use it, anything comes after the end of the </ul> will be placed right after the last list item. The clear:both means clear any previous CSS float “left” or “right”.

Flowing list is particular useful if you have thumbnails and you want to flow them. For a example, see: Xah's Visual Arts Gallery.

✍