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