See http://cssfingerprint.com/about#stats.

See also http://stackoverflow.com/questions/933645/multi-column-css-lists.

I want a multi-column list that:

• uses no JS
• reflows on window size
  • makes as many columns as fit the enclosing element
  • therefore, does not require batching the list into manual column groups
• works in all browsers
• works for an arbitrary number of unknown-width (but single-line-height) elements
  • makes each column fit the width of its (dynamic) contents
• does not create scrollbars or other overflow issues
• is sorted top to bottom where possible

My code is currently:

ul.multi, ol.multi {
 width: 100%;
 margin: 0;
 padding: 0;
 list-style: none;
 -moz-column-width: 12em;
 -webkit-column-width: 12em;
 column-width: 12em;
 -moz-column-gap: 1em;
 -webkit-column-gap: 1em;
 column-gap: 1em;
}

ul.multi li, ol.multi li {
 <!--[if IE]>
  float: left; 
 <![endif]-->
  width: 20em;
  margin: 0;
  padding: 0;
}

Although this works okay, it has some problems:

• I have to guess the content width
• it is right-to-left in IE (though this is acceptable as a graceful degradation mode)
• it won't work at all in non-IE, non-Moz/Webkit/CSS3 browsers

How can this be improved?