Cross-browser compatible multi-column CSS lists

Christian Crumlish  

January 30, 2006

Related Topics

This turned out to be a lot easier than I’d anticipated!

A recent site design called for a list displayed in multiple columns. I’m building the site entirely in CSS and so I encounter the columns within columns, within columns, within columns problem fairly often. It’s tough to get these things looking right in so many different browsers and Firefox in particular seems to stumble on floats within floats.

The quick and dirty solution to a multi-column list is to wrap each list in an individual div. This is impractical however because it unfairly restricts the content owner to a set height and width for these block elements or even a set number of items per column.

The end solution was to set an absolute width on the UL, an absolute width on the LI and then to float each LI left. It won’t work in every situation (such as when the line-height of a list item spans two rows) however it works swimmingly for this project I’m in the process of coding out and can be modified to accomodate other layouts.

Here’s the CSS code:


.box {
display: block;
width: 600px;
}


ul {
list-style-type: none;
margin: 0;
padding: 0;
}


ul li {
list-style-type: none;
margin: 0;
padding-left:15px;
display: block;
width:160px;
float:left;
}


ul.liblu li {
background: url(img/li-blu.gif) top left no-repeat;
}

Some explanation:

The first line (.box) defines a width to contain the list.

The second line (ul) removes the bullets and margins for the list.

The third line (ul li) removes the bullets and margins for each list item, adds 15 pixels of padding to account for the arrow gif, sets each item to be a block element, contrains the widths and floats each item left.

The fourth line (ul.liblu li) adds the pretty background gif.

Here’s the HTML code:


<div class="box">
 <ul class="liblu">
  <li>Lorem ipsum dolor sit amet</li>
  <li>Lorem ipsum </li>
  <li>Lorem ipsum dolor </li>
  <li>Lorem ipsum dolor sit</li>
  <li>Lorem ipsum dolor sit amet</li>
  <li>Lorem amet</li>
  <li>Lorem ipsum </li>
  <li>Lorem ipsum sit amet</li>
  <li>Lorem ipsum amet</li>
  <li>Lorem ipsum dolor sit amet</li>
  <li>Lorem ipsum amet</li>
  <li>Lorem ipsum dolor sit amet</li>
  <li>Lorem ipsum dolor sit amet</li>
  <li>Lorem ipsum </li>
  <li>Lorem ipsum dolor </li>
  <li>Lorem ipsum dolor sit</li>
  <li>Lorem ipsum dolor sit amet</li>
  <li>Lorem amet</li>
  <li>Lorem ipsum </li>
  <li>Lorem ipsum sit amet</li>
  <li>Lorem ipsum amet</li>
  <li>Lorem ipsum dolor sit amet</li>
  <li>Lorem ipsum amet</li>
  <li>Lorem ipsum dolor sit amet</li>
 </ul>
</div>

Here’s the resulting list (screen cap):
Multi-Column Lists

This has been tested in:

Windows XP
Internet Explorer 6
Netscape 7.1
Firefox 1.5
Opera 8.51

Windows 98
IE 5.5

OSX 10.2.8
Safari 1.0.3