Multiple Column List

Question

I have one list with 10 (li) elements. They are displayed in one column.

If I set the height of this list, then how can I display it in two or three columns?

+3

Pradip Mar 11 '11 at 9:32

4 answers

you can check this few column columns

+4

Manoj 11 . '11 9:35

This question has been asked before. See html css talk - how to create multiple list columns? . There is also a helpful A List Apart article that covers six methods for this.

+1

Wylie Mar 11 '11 at 9:37

You can do this very easily with the jQuery-Columns Plugin , for example, to split ul with the .mylist class into 5 columns, which you will do

$(document).ready( function () {
  $('.mylist').cols(5);
});

0

newUserNameHere May 03 '14 at 14:29

Stephan muller · Accepted Answer · 2011-03-11T09:38:12+0000

There is a CSS3 solution for this, but so far it is not widely implemented by browsers. See this example using the CSS property column-count:

Currently works only in FF, Safari and Chrome. Otherwise, you will have to use javascript or split the list into two lists.

-edit- The float option related in other answers is really neat, didn't know about it.