the ryan king

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.

I just realized that I never use Safari’s SnapBack. I wonder if anyone does. Somehow I doubt it.