Question

I want a preferably CSS-only technique for getting an ol to flow into two columns if it is longer than the height of the container. The number of items in the list may vary and the height of the container may change.

When I try setting the li to width:50% and float:left it goes in two columns but 2 goes beside 1 instead of below it.

what I want to achieve is this:

1. abcdef 4. abcdef
2. abcdef 5. abcdef
3. abcdef

Answer 1

This will work for modern browsers (i.e not IE) using the column-count and column-gap rules:

JSFiddle demo

ol#two-columns {
    -moz-column-count: 2;
    -moz-column-gap: 20px;
    -webkit-column-count: 2;
    -webkit-column-gap: 20px;
    column-count: 2;
    column-gap: 20px;
}

The cross-browser option would be:

1. define two DIVs inside the OL and float them to the left
2. pre-calculate the total number of LI’s
3. if the total exceeds the capacity of one DIV, put the rest in the second DIV