Geek Answers Handbook

An ordered list of two columns

Does anyone know of a preferred CSS method just to force a stream stream to 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 to set li to width:50% and float:left , it goes in two columns, but 2 goes next to 1 instead.

what I want to achieve is:

  • abcdef 4. abcdef
  • abcdef 5. abcdef
  • ABCDEF
+6
source share
1 answer

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

fiddle

 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; }

Cross browser option:

  • define two divs inside OL and put them to the left
  • pre-calculate the total amount of LI
  • if the sum exceeds the capacity of one DIV, put the rest in the second DIV
+19
source

More articles:


All Articles