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

By: John Gallant , Holly Bergevin ,

Page 2 of 3

Set for printing

Previous Next

How To "Wrap" A Column

Using an <ol> and some different CSS declarations, we can accomplish just that. Our list is somewhat longer, and we want it to continue across three columns. Each of the list items gets a class attribute which is different depending on which column it will be in, col1, col2, or col3. These classes will provide the "hooks" we need to style our list. Take a look at the HTML in Code Block 3.

The HTML:
<ol>
  <li class="col1">Antelope</li>
  <li class="col1">Baboon</li>
  <li class="col1">Bison</li>
  <li class="col1">Camel</li>
  <li class="col1">Chimpanzee</li>
  <li class="col2 coltopper">Deer</li>
  <li class="col2">Eland</li>
  <li class="col2">Elk</li>
  <li class="col2">Gazelle</li>
  <li class="col2">Gibbon</li>
  <li class="col3 coltopper">Kangaroo</li>
  <li class="col3">Meerkat</li>
  <li class="col3">Sheep</li>
  <li class="col3">Warthog</li>
  <li class="col3">Zebra</li>
</ol>

Code Block 3

Notice in the above HTML that two of the list items each have a second class, coltopper, instead of just one class like the rest of the items. The highlighted sixth and the eleventh list items with the coltopper class will start the second and third column respectively.

Using multiple classes for an element, for example class="col2 coltopper" as we have here (note the space between the two class names), allows the rule sets from each of those classes to be applied to the element. More than one class name may be used in a single class attribute. Using this technique can decrease the complexity of your CSS by eliminating the necessity to repeat declarations.

With everything now identified by a class attribute or two, let's look at the CSS to see what we are going to do with all these classes.

The CSS:
ol {
  margin: 0;
  padding: 0;
}
 
li {
  margin: 0;
  padding: 0;
  line-height: 1.3em;
}
 
.col1 {margin-left: 3em;}
 
.col2 {margin-left: 13em;}
 
.col3 {margin-left: 23em;}
 
.coltopper {margin-top: -6.5em;}

Code Block 4

First, note that most of the first two rule sets merely zero the default margins and padding that may exist on list elements. This allows all browsers to start with virtually identical list renderings, something that is very important when using this technique.

So, how do these rules work to make the columns? In order to give the appearance of three columns, we give all the list items with the class attribute col1 a common left margin. Then the list items with col2 get a larger left margin, and the col3 LI's get a still larger left margin.

This does produce three different "columns" in the display, but the second column will begin only after the first has ended, and the same thing happens to the third column, causing a "stair-step" effect. The columns are properly spaced horizontally, but not yet vertically on the same screen level, meaning they do not appear next to each other.

If the left margins are all that we use, the result will appear as in Demo 4 below:

  1. Antelope
  2. Baboon
  3. Bison
  4. Camel
  5. Chimpanzee
  6. Deer
  7. Eland
  8. Elk
  9. Gazelle
  10. Gibbon
  11. Kangaroo
  12. Meerkat
  13. Sheep
  14. Warthog
  15. Zebra

Demo 4

Page 2 of 3 Previous 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