Formatting list items to alphabetize vertically and then horizontally when floated left

Question

Assuming I have the following html:

<ul id="a">
    <li>a</li>
    <li>b</li>
    <li>c</li>
    <li>d</li>
</ul>

And the following CSS:

ul#a {width:20px;}
ul#a li {float:left; width:10px;}

The current output is:

a   b
c   d

The output I'm going for is:

a   c
b   d

Is there any way to do this without breaking up the li's into two ul's?

Thanks, -Tom

Answer 1

Month ago I think a similar post is here in SO (I tried to search but can't found that post). Following is one of my favorite solution: Newspaper Columns jQuery Plugin.

Answer 2

This article from A List Apart may help you. It is from 2005 though, so it may be somewhat outdated. Still, it is somewhere to start.