The trick here is to force the list to break at the right point. If you want two columns, you need to float the list items left and set them at 50% width, therefore the list items will only ever fit two side-by-side, then begin again on the row beneath. By that token, three columns would require a width of 33% and floated left, four would be 25% and so on.

The code

Both the markup and CSS for this is incredibly simple, nothing fancy, no CSS3, nothing progressive, just basic styling applied to lean markup.

The markup

The markup for this is just a simple ul, thus:

 
  
CSS
  
XHTML
  
Semantics
  
Accessibility
  
Usability
  
Web Standards
  
PHP
  
Typography
  
Grids
  
CSS3
  
HTML5
  
UI

And to make this into a multiple column list:

ul{
  width:760px;
  margin-bottom:20px;
  overflow:hidden;
  border-top:1px solid #ccc;
}
li{
  line-height:1.5em;
  border-bottom:1px solid #ccc;
  float:left;
  display:inline;
}
#double li  { width:50%;} 
#triple li  { width:33.333%; } 
#quad li    { width:25%; } 
#six li     { width:16.666%; } 

When to use this

Use this wisely… It displays content in an ambiguous manner and should not be used where order of reading is imperative.

This method should only be used if the lists content doesn’t require any specific ordering as the markup is written linearly and the list is displayed in a matrix. As you can see, the way the content is displayed means it can be read across»down»across or down»up»down. This means that the way you write your content is not necessarily the way it will be read. In my example this isn’t an issue, as the content can safely be read in any order.