An easy CSS recipe for multi-column lists

Here is a CSS recipe to display any ordered or unordered list in multiple columns.


<style>
.fourColumns > li {
min-width: 25%;
float: left;
}
/* This will clear the floating in standards compliant browers... might not work in IE */
.fourColumns:after {
display: block;
content: '&nbsp;';
clear: both;
}
</style>
<ol class="fourColumns">
<li>An item </li>
<li>Another item </li>
<li>A different item</li>
<li>Item four </li>
<li>etc </li>
<li>An itme </li>
<li>An item </li>
<li>Another item </li>
<li>A different item</li>
<li>Item four </li>
<li>etc </li>
<li>An itme </li>
<li>An item </li>
<li>Another item </li>
<li>A different item</li>
<li>Item four </li>
<li>etc </li>
<li>An itme </li>
</ol>

That all becomes

  1. An item
  2. An item
  3. Another item
  4. A different item
  5. Item four
  6. etc
  7. An itme
  8. An item
  9. An item
  10. An item
  11. Another item
  12. A different item
  13. Item four
  14. etc
  15. An itme
  16. An item
  17. An item
  18. An item
  19. Another item
  20. A different item
  21. Item four
  22. etc
  23. An itme
  24. An item
  25. An item
  26. An item
  27. Another item
  28. A different item
  29. Item four
  30. etc
  31. An itme
  32. An item

Happy Darwin Day!

Today, February 12, is Darwin Day.

Darwin Day is an international celebration of science and humanity held on or around February 12, the day that Charles Darwin was born on in 1809. Specifically, it celebrates the discoveries and life of Charles Darwin — the man who first described biological evolution via natural selection with scientific rigor. More generally, Darwin Day expresses gratitude for the enormous benefits that scientific knowledge, acquired through human curiosity and ingenuity, has contributed to the advancement of humanity.

See also, the Darwin Day entry on Wikipedia.