A vertically oriented ordered list broken into 2 columns using CSS selectors

by Noah Blon

Since IE9 doesnt support CSS3 columns, or flexbox, here's an IE9+ method for creating a vertically oriented ordered list that breaks to two columns without needing extra elements, classes, or JS.

1st Column contains more items if there are a total odd number of items

  1. Aloe
  2. Bergamot
  3. Calendula
  4. Damiana
  5. Elderflower
  6. Feverfew
  7. Ginger
  8. Hops
  9. Iris
  10. Juniper
  11. Kava kava
  12. Lavender
  13. Marjoram
  14. Nutmeg
  15. Oregano
  16. Pennyroyal
  17. Marjoram
  18. Nutmeg
  19. Oregano
  20. Pennyroyal
  21. Marjoram
  22. Nutmeg
  23. Oregano

2nd Column contains more items if there are a total odd number of items

  1. Aloe
  2. Bergamot
  3. Calendula
  4. Damiana
  5. Elderflower
  6. Feverfew
  7. Ginger
  8. Hops
  9. Iris
  10. Juniper
  11. Kava kava
  12. Lavender
  13. Marjoram
  14. Nutmeg
  15. Oregano
  16. Pennyroyal
  17. Marjoram
  18. Nutmeg
  19. Oregano
  20. Pennyroyal
  21. Marjoram
  22. Nutmeg
  23. Oregano

How it works

All items are absolutely positioned based on the line height using nth-child. The items in the second column are selected with nth-child using a clever trick to select half the items. This overrides the initial absolute position styling. The second columns is staticly positioned and pushed right with margin. I've used Sass to make generating these rules easier but its not required. One caveat is that you'll need to know the maximum number of items that might be held in a single column. It will work for any number of items below that value. In addition, this positioning will only work with items that will fit on a single line.

Additional Resources