List in multiple columns

Question

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

If I fixed height of that list then how can I display it in two or three columns?

Here's a live example of how to do it in jquery: http://jsfiddle.net/EebVF/5 Using this jquery plugin: http://github.com/fzondlo/jquery-columns — newUserNameHere, May 03 '14 at 14:30

Manoj · Answer 1 · 2013-03-05T06:10:03.960

4

edited Mar 05 '13 at 06:10

answered Mar 11 '11 at 09:35

Manoj

Stephan Muller · Accepted Answer · 2014-05-17T14:58:35.333

3

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

Currently only works in FF, Safari and Chrome though. Otherwise, you'll have to use javascript or divide the list up in two lists.

-edit- The float variant as linked in other answers is really neat, didn't know about that one.

edited May 17 '14 at 14:58

answered Mar 11 '11 at 09:38

Stephan Muller

It should be column-count, not list-count – Vasily May 12 '14 at 11:54
you're right, strange how that went unnoticed for so long. fixed! – Stephan Muller May 17 '14 at 14:58

score 1 · Answer 3 · answered May 03 '14 at 14:29

1

You can do this really easily with the jQuery-Columns Plugin for example to split a ul with a class of .mylist into 5 columns you would do

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

answered May 03 '14 at 14:29

newUserNameHere

score 1 · Answer 4 · edited May 23 '17 at 09:58

1

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

edited May 23 '17 at 09:58

Community

answered Mar 11 '11 at 09:37

Wylie

4 Answers4