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?