core core - 2 years ago 71
CSS Question

Dividing long list of <li> tags into columns?

I've got a list of about 30

in a
. Is there any way, using CSS, to divide these into three columns of ten?

Answer Source

In CSS3 this is possible.

#columns {
  -moz-column-count: 3;
  -moz-column-gap: 20px;
  -webkit-column-count: 3;
  -webkit-column-gap: 20px;
  column-count: 3;
  column-gap: 20px;


<div id="columns">
... lots of lis ...

The list items will spill over into the next column as they exceed the height of the container.

Perhaps for older browser you could use JavaScript, as this seems to be more aesthetic than a critical feature.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download