Bulleted Lists: Multi-Layered Fudge

Last Updated on Wednesday, 23 March 2011 12:05

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:

<div id="div">

  <p>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.</p>

  
  <ul class="left">
    <li>Item 1: Left</li>
    <li>Item 2: Left</li>
  </ul>
  <ul class="right">

    <li>Item 3 Right: A long item</li>
    <li>Item 4 Right: This is longer, just for
        fun</li>
  </ul>
    
  <p>Duis aute irure dolor in reprehenderit
  in voluptatevelit esse cillum dolore eu
  fugiat nulla pariatur. Excepteur sint occaecat
  cupidatat non proident.</p>

  
  <ul class="left">
    <li>Item 1 Left: Varying length</li>
    <li>Item 2 Left: This one varies in length,
        too</li>
  
  </ul>
  <ul class="right">

    <li>Item 3 Right: This is shorter</li>
    <li>Item 4 Right: Right</li>
  </ul>

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

  <ul class="left">
    <li>Item 1 Left</li>
    <li>Item 2 Left</li>
  </ul>

  <ul class="right">
    <li>Item 3 Right: Another long item</li>
    <li>Item 4 Right: Right</li>
  </ul>

</div>

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;
  }