Question

I am producing a <ul> of alphabetically sorted items, which spans over multiple lines. An example of this can be seen here:

http://jsfiddle.net/H4FPw/1/

currently the list is laid out horizontally, as follows:

a  b  c

d  e  f

g  h  i

j  k  l

But clients being clients, I have now been asked to change this so that the list is vertically oriented, as follows:

a  e  i

b  f  j

c  g  k

d  h  l

Unfortunately I don’t know how to do this in the nice and tidy way that I’ve originally done it.

Can somebody please fill me in if this is possible to do with single <ul> and CSS? Or do I have to make multiple lists?

Answer 1

You can’t do it by only changing CSS.

Well, you can if you don’t care about IE: http://caniuse.com/#search=multiple%20column

You have to compromise somewhere:

• Split the <ul> into three <ul>s manually.
• As hinted at by @PeeHaa, use server-side code to change the order that the <li>s are output (but still keep them inside one <ul>).
• Use JavaScript to reorder the <li>s. I did this using jQuery here, but it would probably make more sense to use a plugin like this: http://welcome.totheinter.net/columnizer-jquery-plugin/