Issue
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
Solution
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
Answered By - Matanya
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.