List Splitter

Create multicolumn lists ordered vertically or horizontally

To create a multicolumn list with HTML, you can float each li element to the left within a container of the proper size. Unfortunately, that orders the list items from left to right on each line. People tend to read multi-column lists from top to bottom before moving to the next column.

This page demonstrates a script that can convert a standard, single-column list into a multicolumn list using float, and then move each list item to the proper position for top-to-bottom reading. There's an option to output the source code of the resulting list so you can use the list in your own webpage. The CSS position property is used to position each list item as you requested.

You'd obviously have to edit the list before using this application as anything other than a demonstration, so it contains the content you want. Currently, the width of each list item must be a maximum of 150 pixels wide. This limitation will likely be removed in a future version.

As of this writing, CSS3 multicolumn layout isn't widely enough supported to be considered an option, but it's something to look for in future browsers.

Click Demo or Custom