css: Cross-browser, reflowing, top-to-bottom, multi-column lists

Question

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?

Answer 1

I would avoid using CSS3 for any structural website design. My best guess is try something like below, essentially just removing the CSS3 stuff. The big issue here if I am understanding you correctly is not knowing the width of you items. With a fixed width something like this should be all you need, but for what you have described it looks like your going to need some help from our good old friend Javascript! : )

<style>
body, html
{
    margin: 0;
    padding: 0;
}
ul.multi
{
    width: 100%;
    list-style: none;
    margin: 0;
    padding: 0;
}
ul.multi li
{
    float: left;
    width:10em;
    line-height: 1;
    margin: 0;
    padding: 0;
}
</style>

<ul class="multi">
    <li>a</li>
    <li>b</li>
    <li>c</li>
    <li>d</li>
    <li>e</li>
    <li>f</li>
    <li>g</li>
    <li>h</li>
</ul>