ordered list two column flow
13,833
This will work for modern browsers (i.e not IE) using the column-count
and column-gap
rules :
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
Author by
Devin Crossman
Updated on June 07, 2022Comments
-
Devin Crossman almost 2 years
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%
andfloat: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