How to make floating DIV list appear in columns, not rows

Question

I have a HTML layout puzzle on my hands. I have a large alphabetical list, generated by my PHP app, and I need to output it on a web page. The markup generated look like thi

Answer 1

I can't think of a pure CSS solution.

You said:

Note: I already solved it by splitting the list in two parts by PHP, but I want to know, if there is a HTML/CSS solution here.

So, you have the power of PHP. In that case, I would keep the code you already have, but output the elements in a different order:

See: http://jsfiddle.net/xyLkz/

A
E
B
F
C
G
D
H

How easy that will be depends on how your PHP is structured.

If you have everything in an array, then in this case, you would just have two loops (one outputting odd array elements, the other even ones). If you need support for n columns, that wouldn't be a problem either.

What would be a problem is if you're building the output "on-the-fly", inside the loop. In that case, you'd probably have to resort to buffering the output of each iteration of the loop into an array, and then doing the same double-loop process afterwards.