css - Dividing long list of <li> tags into columns?

Question

I've got a list of about 30 <li> in a <ul>. Is there any way, using CSS, to divide these into three columns of ten?

Answer 1

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

HTML:

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

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.