html css - how to create multiple column list?

Question

I have an "Ordered List" which contains about 100 "List Items". This ol makes my page very long and users have to scroll too much.

How can I get the UL to show like this:

1.           6.           11.
2.           7.           12.
3.           8.           13.
4.           9.           14.
5.          10.           15.

Answer 1

If you does not matter the vertical order, but the layout:

1.      2.      3.       4.
5.      6.      7.       8.
9.      10.     11.      12.

You can simply set the li elements this way:

li {
    display: block;
    width: 25%;
    float: left;
}

It should work. If you need to have them in vertical order you need to act in the php script dividing them into separate divs and then float them.

Answer 2

In a perfect world you could use css3 column module but sadly it's currently only partially supported by webkit and gecko browsers (using -webkit and -moz).

Answer 3

There was an article on A List Apart a while back which covered exactly this question. I guess if what is mentioned there doesn't suffice you could of course always revert to server-sided coding or client-side coding to divide the list automatically in three portions.