Two Column Definition lists

I have a CSS question. I can’t seem to find anything about this in the css-discuss archives and I’m not a subscriber to the list, otherwise I’d ask there.

I have a definition list like so, alternating <dt> and <dd>:


<dl class="example">
   <dt>foo</dt>
     <dd>bar</dd>
</dl>

I want each <dt> and <dd> pair to be on the same line, with a colon between the two and the text of the <dt> right-justified. Like so:

foo:
bar

Here’s the technique I’m using:


dl.example dt {
  width: 6em;
  text-align: right;
}

dl.example dt:after {
    content: ":";
}

dl.example dd {
  margin-top: -1.1em;
  margin-left: 7em;
}

But this doesn’t seem very robust, as it won’t cope with longer text lengths. There’s gotta be a better way.

Update:

So, I got several suggestions, each essentially the same: “float:left the dt“. That was actually the original solution I had, but it got quite annoying when interacting with other, non-floated elements around it. Essentially, it means I have to put “clear:both” on the elements around this dl. It’d work, but I was just hoping there was a better way.

This entry was posted on Friday, February 3rd, 2006 at 7:15 pm.

5 Responses to “Two Column Definition lists”

  1. Andy Hum Says:
    February 4th, 2006 at 4:28 am

    The way I normally achieve that effect, is by floating the dt element left, causing the dd element to flow directly after it.

    dl.example dt {

    width: 6em;
    text-align: right;
    }

  2. Andy Hume Says:
    February 4th, 2006 at 4:30 am

    The way I normally achieve this effect is by floating the dt element to the left, causing the dd element to flow directly after it – however long the text is.


    dl.example dt {
    float:left;
    width: 6em;
    text-align: right;
    }

    And no need for the margins on the dd then – infact you don’t need to style it at all to achieve the layout effect.

  3. assaf Says:
    February 6th, 2006 at 7:02 pm

    dt {
    width: 50%;
    text-align: right;
    float: left;
    margin-right: 10px;
    }

    dd {
    margin-left: 50%;
    }

    test
    this
    test some more
    of this thing

  4. assaf Says:
    February 6th, 2006 at 7:10 pm

    oops. forgot that markup get swallowed. but any, the % thing seems to work, at least on FireFox.

  5. Archimedes Trajano Says:
    January 20th, 2007 at 11:08 pm

    Have you had any luck with this? And a sample I can look at?