Do You Want To Do That With CSS? - Multiple Column Lists

By: John Gallant , Holly Bergevin ,

Page 1 of 3

Set for printing

Next

In this tutorial we will learn methods to make a list display as multiple columns of list items, rather than as a single column or horizontal row. This can be a big space saver in some page designs, while still retaining the vertical ordering of a list. Since tabled layouts always linearize as a series of rows, this new method gives us the ability to provide screen readers with a source order that runs down each column instead of across each row. Not everyone will need this technique, but those who must deal with accessibility will find it highly useful.

The First Step

In Zoe Gillenwater's Semantic (X)HTML Markup: Styling Lists she showed us one method of making a multiple-column list, by floating width-defined list items in a width-defined <ol> or <ul>. She also clued us in to a misapplied-margin bug that Internet Explorer for Windows and Opera share, and gave us hints on what to do to work around the bug. Let's take a look at that markup.

The HTML:
<ul>
  <li>Antelope</li>
  <li>Bison</li>
  <li>Camel</li>
  <li>Deer</li>
  <li>Eland</li>
  <li>Gazelle</li>
</ul>
 
The CSS:
ul {
  float: left;
  width: 12em;
  margin: 0;
  padding: 0;
  list-style: none;
}
 
li {
  float: left;
  width: 6em;
  margin: 0;
  padding: 0;
}

Code Block 1

Below, Demo 1 shows how this code will display. A few small adjustments to override cosmetic aspects of the CMX style sheet have been made in the list. The list itself has been given a background color to show how wide it is.

  • Antelope
  • Bison
  • Camel
  • Deer
  • Eland
  • Gazelle

Demo 1

If we want more columns we can widen the list and and add more list items, as shown in Demo 2. Notice how our list items now float three across and then wrap to the next line when they run out of room to display side by side. For an unordered list, this might be a great solution, as you can organize the list items in any way you need to get the display you want. In Demo 2 you'll also see that one list item in each "row" has been given a background color so you can more clearly see the extent of each list item. The apparent padding to the right of each list item shows clearly the how the width is defined.

  • Antelope
  • Bison
  • Camel
  • Deer
  • Eland
  • Elk
  • Gazelle
  • Sheep
  • Zebra

Demo 2

As you can see, this makes a pretty handy multiple-column list. Unfortunately, one drawback is that IE/Win and Opera browsers will not show bullets or numbering on floated and width-defined list items. Since this method depends on those two techniques, some solution needs to be found to restore the bullets.

Give me back my bullets!

For an unordered list, this problem can be overcome by using a graphic bullet or other image. This image is placed as a background image for the list item, and then the various margins and paddings are adjusted as necessary. Ordered lists, however, would require separate numerical background images for each list item, which would be tedious to implement, to say the least. Code Block 2 and Demo 3 show this background image method for an unordered list. The HTML remains the same as in Demo 1 and so will not be repeated here.

The CSS:
ul {
  float: left;
  width: 15em; /* width is changed */
  margin: 0;
  padding: 0;
  list-style: none;
}
 
li {
  float: left;
  width: 6em;
  margin: 0;
  background-image: url(smileybullet.gif);
  background-position: 0 3px;
  background-repeat: no-repeat;
  padding: 0 0 0 1.5em; /* left padding moves the text away from the bullet */
}

Code Block 2
  • Antelope
  • Bison
  • Camel
  • Deer
  • Eland
  • Gazelle

Demo 3

But what if we don't want the list to run horizontally as it does, and then wrap to the next line? What if we want the columns to run vertically instead, and we want to use an ordered list so that the list items are numbered?

Page 1 of 3 1 2 3 Next


download
Download Support Files


Downloads are disabled during your trial period.


Keywords
CSS, list, lists, OL, UL, ordered list, unordered list, multiple column list, mulit-column list, float, floated, negative margin, bullets, background image, flowing a list across multiple columns