DT with multiple DD on the right?

Question

Basically I would like to achive something like this in HTML of course:

  Description:  Element #1
                Element #2
                Element #3 [eventually bla bla bla]
                [...]

With table it's a joke:

<table>
  <tr>
   <td>Description</td>
   <td>Element #1<br>Element #2<br>Element #3 [eventually bla bla bla]</td>
  </tr>
</table>

But should I use the table or ?

There is a good example from twitter's bootstrap: http://twitter.github.com/bootstrap/base-css.html#typography (scroll down a little and you'll see the title "Horizontal description" on the right side) — Ege Özcan, Apr 25 '12 at 23:36

score 5 · Accepted Answer · answered Apr 25 '12 at 23:31

5

This isn't that hard, just remember your combinators:

dt {
    float: left;
    width: 8em;
}

dd {
    margin-left: 9em;
}

dd + dd {
    margin-left: 9em;
}

JS Fiddle demo.

References:

E + F, adajacent-sibling selector.

answered Apr 25 '12 at 23:31

David Thomas

249,100
51
377
410

isn't that thrid rule useless? dd + dd – dynamic Apr 25 '12 at 23:34
Try the demo *without* it, and see what it does. – David Thomas Apr 25 '12 at 23:35
indeed i did and nothing changed, that's why i asked XD – dynamic Apr 25 '12 at 23:36
Ah. ...well, in this case, yes. It appears to be. I remember having problems with this sort of layout before, when I left it out. Though I suspect I must've been doing something different in that instance. Your choice, then. =) – David Thomas Apr 25 '12 at 23:37
if your second rule already sets margin-left of dd, I think it's clear useless that dd+dd rule again – dynamic Apr 25 '12 at 23:39
Then don't use it. As noted, I used it for a reason a (long) while ago. It helped then, isn't needed now. – David Thomas Apr 25 '12 at 23:41
maybe you were fixing some IE issue :) – dynamic Apr 25 '12 at 23:46
I tried the solution and I would not recommend it because the margin might not be exakt depending on the Maybe better use it with flexbox like [this post](https://stackoverflow.com/questions/40762697/how-to-align-dt-and-dd-side-by-side-using-flexbox-with-multiple-dd-underneath-th) – rokdd Dec 28 '19 at 21:52

score -1 · Answer 2 · answered Apr 26 '12 at 06:33

Using a table it is indeed easy, and you have the additional option of making each element a cell of its own:

<table>
  <tr>
   <td rowspan=3>Description
   <td>Element #1
  <tr>
   <td>Element #2
  <tr>
   <td>Element #3 [eventually bla bla bla]
</table>

Styling will be easy then. (You would probably find that you want td { vertical-align: top}, perhaps some borders, maybe padding.) So the question is: why wouldn’t use a variant of a simple table, which almost directly gives you the desired appearance?

Using definition list markup dl would either force to make a guess on the width of the “Description” texts, or use CSS features that don’t work robustly across browsers.

if it was for me I would always use tables, but you know these time tables aren't "welcome" — dynamic, Apr 26 '12 at 11:03
anyway with your solution you have to know how many Element there will be. If i must use table i will use my solution at this point — dynamic, Apr 26 '12 at 11:04

DT with multiple DD on the right?

2 Answers2

Linked