tags:

views:

112

answers:

1

I'm trying to develop a layout for my website in which elements of a definition list will be laid out horizontally, kind of like this:

term 1                term 2               term 3
definition 1          definition 2         definition 3

Anyone know a way to make a definition list look like this using valid CSS? Or if I can't do it with a <dl>, what would be the recommended structure?

+4  A: 

This should do it:

<dl>
    <dt>term 1</dt>
    <dd>definition 1</dd>
</dl>
<dl>
    <dt>term 2</dt>
    <dd>definition 2</dd>
</dl>
<dl>
    <dt>term 3</dt>
    <dd>definition 3</dd>
</dl>

And in CSS:

dl {
    float: left;
}

dl dd {
    display: block;
    margin: 0;
}

Apply other styling as necessary. A working example can be found here:

http://www.ulmanen.fi/stuff/dl.php

Tatu Ulmanen
Thanks, it worked!
David Zaslavsky
Normally you'd like to have the related definitions in a single list.
BalusC
The fact that `<dl>` has to be abused (by including multiple instances as a single list) to do this actually exposes a flaw in the rationale behind the structure of dictionary lists in the current spec. Multiple definitions (or multiple terms) can be implicitly grouped by document order, but they can't be explicitly, declaratively grouped, which makes logically acting on those groupings nontrivial.
eyelidlessness