CODEWITHSUNDEEP
htmlcss
Pradip
Pradip

Reputation: 1327

List in multiple columns

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?

Upvotes: 3

Views: 6220

Answers (4)

Stephan Muller
Stephan Muller

Reputation: 27600

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:

http://jsfiddle.net/hwzpy/

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.

Upvotes: 3

newUserNameHere
newUserNameHere

Reputation: 17971

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);
});

Here's a live example on jsfiddle

Upvotes: 1

Manoj
Manoj

Reputation: 5612

you can check this multiple column lists

Upvotes: 4

Wylie
Wylie

Reputation: 1064

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.

Upvotes: 1

Related Questions