ordered list two column flow

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:

abcdef 4. abcdef
abcdef 5. abcdef
abcdef

Have you tried this? [link](http://stackoverflow.com/questions/194803/automatic-two-columns-with-css-or-javascript?rq=1) `Automatic two columns with CSS or JavaScript` — sonofagun, Dec 10 '12 at 00:46

score 26 · Accepted Answer · edited Oct 21 '22 at 15:39

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:

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

ordered list two column flow

1 Answers1