css: Cross-browser, reflowing, top-to-bottom, multi-column lists
- by Sai Emrys
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?
