Wrapping lists into columns

Question

I'm using ColdFusion to populate a template that includes HTML unordered lists (<ul>s).

Most of these aren't that long, but a few have ridiculously long lengths and could really stand to be in 2-3 columns.

Is there an HTML, ColdFusion or perhaps JavaScript (I'm accepting jQuery solutions) way to do this easily? It's not worth some over-complicated heavyweight solution to save some scrolling.

Answer 1

If Safari and Firefox support is good enough for you, there is a CSS solution:

ul {   -webkit-column-count: 3;      -moz-column-count: 3;           column-count: 3;   -webkit-column-gap: 2em;      -moz-column-gap: 2em;           column-gap: 2em; } 

I'm not sure about Opera.

Answer 2

So I dug up this article from A List Apart CSS Swag: Multi-Column Lists. I ended up using the first solution, it's not the best but the others require either using complex HTML that can't be generated dynamically, or creating a lot of custom classes, which could be done but would require loads of in-line styling and possibly a huge page.

Other solutions are still welcome though.