I'd like to display a list of items in multiple columns without having to specify the number of columns, and just let the browser add more columns so that all items fit.
I tried to adapt this article, but the items are just listed as a long, one-column list:
<head>
<STYLE type="text/css">
ul.columns {
float: left;
width: 12em;
margin: 20px 0 1em;
padding: 0;
list-style: none;
}
li.columns {
float: left;
width: 6em;
margin: 0;
padding: 0;
list-style: none;
}
</STYLE>
</head>
<body>
<ul class="columns">
<li class='colums'>test</li>
<li class='colums'>test</li>
<li class='colums'>test</li>
<li class='colums'>test</li>
<li class='colums'>test</li>
</ul>
Any CSS expert could tell me what's wrong with the above?