html css - how to create multiple column list?

If for you don't care about the vertical order, but only 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.


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.


You could use css3 column module but beware that it is not fully supported on all web browsers.

Tags:

Html

Css