There doesn't seem to be an easy way in (well supported) css to do this. I'm looking for a javascript solution, preferably jQuery.

I have an unordered list like this:

<ul>
    <li>A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
    <li>E</li>        
    ...etc
</ul>

I want each column to have a height for example four items and fill vertically rather than horizontally like a css float:

A     E
B     F
C
D
Edit
Report