Sorting html ul/li list in alphabetical vertical blocks

Question

Here's a problem I run into every now and then, that I usually try and solve from a back end perspective, but would like to know if there's a magic solution others have found to solve this on the front end.

Given a ul/li list, provided in the markup alphabetically, from a-z:

<ul>
    <li>Alpha</li>
    <li>Bravo</li>
    <li>Charlie</li>
    <li>Delta</li>
    <li>Echo</li>
    <li>Foxtrot</li>
    <li>Golf</li>
    <li>Hotel</li>
    <li>India</li>
    <li>Juliet</li>
    <li>Kilo</li>
    <li>Lima</li>
    <li>Mike</li>
    <li>November</li>
    <li>Oscar</li>
    <li>Papa</li>
    <li>Quebec</li>
    <li>Romeo</li>
    <li>Sierra</li>
    <li>Tango</li>
    <li>Uniform</li>
    <li>Victor</li>
    <li>Whiskey</li>
    <li>X-ray</li>
    <li>Yankee</li>
    <li>Zulu</li>
</ul>

Typically, it's very easy to float the items left and sort them visually horizontal in blocks, like such:

However, to get columns, like this:

I've always had to break the HTML up into separate entities, such as four separate <ul> elements in the above example.

Is there a way to keep it all in one ul list without any additional markup, using just CSS (no JavaScript) to get a columnar look like the second image above? My guess is "no," but I've seen some magic before, and I'd like to answer this more definitively.

Answer 1

Not yet I´m afraid.

CSS3 has some nice features, see for example http://www.quirksmode.org/css/multicolumn.html but Internet Explorer does not support it and I don´t know how the support in IE9 will be (according to Microsoft non-existent in the beta at the moment)

Answer 2

You can use CSS3 Multicolumn Layouts, and its polyfill: https://github.com/gryzzly/CSS-Multi-column-Layout-Module-Polyfill

Answer 3

I needed it today and wrote this python equivalent. You can write with native javascript.

# -*- coding: utf8 -*-
import math
# --------------------- EDIT THIS PART
#define columns
c = 4
# you can define to alphabetical list here
# i used to numbers, because range func. very effective for testing
list = range(1, 26, 1)
# ---------------------- END OF EDIT
# firstly sort

list = sorted(list)

# calculate total row
r = int(math.ceil(len(list) / c)) + (1 if len(list) % c is not 0 else 0)

index = 0
table1 = []
for x in range(c):
    table1.append([])
    for y in range(r):
        if len(list) > index:
            table1[x].append(y)
            table1[x][y] = list[index]
            index += 1


res = ''
for i in range(r):
    for x in table1:
        try:
            #print x[i]
            res += "%s\t|\t" % x[i]
        except IndexError:
            res += "%s\t|\t" % "_"
            pass
    res += "\n"

#print table1
print res

https://github.com/berkantaydin/vertical-alphabetical-sorting-with-columns