A List Apart

Menu
Issue № 195

Bulleted Lists: Multi-Layered Fudge

by Published in CSS, Layout & Grids81 Comments

Designing our company’s website in CSS was coming along nicely until I hit a roadblock. The challenge was to create two columns of bulleted lists in the flow of the text. The layout I had in mind was something like this:

Paragraph 1
Bulleted list | Bulleted list
Paragraph 2
Bulleted list | Bulleted list
Paragraph 3
Bulleted list | Bulleted list
...and so on

I tossed around some lists that worked fine in IE 6, but caused a headache in almost every other browser. Perhaps I could have smashed through the roadblock using horizontal lists. But I’ve always found it easier to float, so that’s what I did.

Floating ULs

To solve the problem with floats, let’s assign two classes of unordered lists, ul.left and ul.right, which we’ll place in a div named “div” that’s 800 px wide (yes, 800 is just an arbitrary number; you can set it to whatever width you want). The basic CSS reads:

  #div {width: 800px;}
  ul.left {float: left;}
  ul.right {float: right;}

For the markup, we’ll use three paragraphs of Lorem Ipsum text, slot in the unordered lists, and place the whole lot in the div. The markup looks like this:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.


  • Item 1: Left
  • Item 2: Left

  • Item 3 Right: A long item
  • Item 4 Right: This is longer, just for fun


Duis aute irure dolor in reprehenderit in voluptatevelit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.


  • Item 1 Left: Varying length
  • Item 2 Left: This one varies in length, too

  • Item 3 Right: This is shorter
  • Item 4 Right: Right

Pellentesque et erat. Quisque at quam. Donec accumsan tellus at tellus. Donec metus. Sed sit amet ante vitae metus imperdiet varius. Vestibulum pulvinar bibendum.

  • Item 1 Left
  • Item 2 Left

  • Item 3 Right: Another long item
  • Item 4 Right: Right

The trouble with Dilbert

The trouble with our UL floats is this: the text of the paragraph below creeps up between the two floating ULs. Also, the UL floating right loses alignment.

To overcome this, we’ll do three things:

  1. Set the margin, padding and border to zero. This is for consistency, to prevent browsers from meddling with the alignment of our bullets with different “default” padding / margins.
  2. Specify the bullets. Again, this is to maintain consistency across browsers. We’ll use simple square bullets.
  3. Declare the width of the ULs: Here, we’ll assign an arbitrary width of 400 px for each UL, half the width of the containing div.

The CSS now looks like this:

  #div {width: 800px;}
  
  ul.left {
    float: left;
    width: 400px; 
    margin: 0px;
    padding: 0px;
    border: 0px none; 
    list-style-position: inside;
    list-style-type: square;
  }
  
  ul.right {
    float: right;
    width: 400px; 
    margin: 0px;
    padding: 0px;
    border: 0px none; 
    list-style-position: inside;
    list-style-type: square;
  }

The spacing gremlin

IE 6 leaves an equal amount of space before and after the ULs. However, later versions of Mozilla (1.7.3), Opera (7.54) and Firefox (1.0) leave space before the ULs, but none after. To ensure that the space before and after the ULs is equal, we’ll assign a padding of 15px to the top and bottom of the ULs, like so:

  #div {width: 800px;}
  
  ul.left {
    float: left;
    width: 400px; 
    margin: 0px;
    padding: 15px 0px;
    border: 0px none; 
    list-style-position: inside;
    list-style-type: square;
  }
  
  ul.right {
    float: right;
    width: 400px; 
    margin: 0px;
    padding: 15px 0px;
    border: 0px none; 
    list-style-position: inside;
    list-style-type: square;
  }

IE 6 is happy. There’s some space left after the ULs in Mozilla, Opera and Firefox, but the space before and after the ULs is still not exactly equal. This uneven spacing is a result of the default space left after the preceding paragraph, so it’s the paragraph that needs defining to correct this. Defining the margin or padding at the top of our ULs will not solve this problem. 

We want to cook our fudge to perfection, so we’ll add a paragraph class and called .no-space and set its margin and padding to 0:

  .no-space {
    margin: 0px;
    padding: 0px;
  }

We’ll also change the markup to include this paragraph class:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

  • Item 1: Left
  • Item 2: Left

  • Item 3 Right: A long item
  • Item 4 Right: This is longer, just for fun

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat.

  • Item 1 Left: Varying length
  • Item 2 Left: This one varies in length, too

  • Item 3 Right: This is shorter
  • Item 4 Right: Right

Pellentesque et erat. Quisque at quam. Donec accumsan tellus at tellus. Donec metus. Sed sit amet ante vitae metus imperdiet varius.

  • Item 1 Left
  • Item 2 Left

  • Item 3 Right: Another long item
  • Item 4 Right: Right

Now it seems everyone’s happy, more or less. We’re almost done.

It would look better, though, if the left column of bullets was indented, rather than being stuck to the left margin. To achieve this end, we’ll do the following:

  1. Declare relative positioning for the left UL.
  2. Specify its distance from the left. In our example, let’s make this distance 50 px.

The CSS now reads:

  #div {width: 800px;}
  
  ul.left {
    float: left;
    width: 400px; 
    margin: 0px;
    padding: 15px 0px;
    border: 0px none; 
    list-style-position: inside;
    list-style-type: square;
    position: relative;
    left: 50px;
  }
  
  ul.right {
    float: right;
    width: 400px; 
    margin: 0px;
    padding: 15px 0px;
    border: 0px none; 
    list-style-position: inside;
    list-style-type: square;
  }
  
  .no-space {
    margin: 0px;
    padding: 0px;
  }

Things are looking good. That’s it from me, really. Oh, and you can view the page that gave me the two-list headache in the first place. The technique used there is quite similar.

I hope you enjoy the multi-layered fudge. Add your own yummy gif bullets and serve piping hot!

About the Author

81 Reader Comments

Load Comments