3

I have the following DL in a container that is 300px wide.

<style type="text/css">
dl {width: 300px}
dt {
  float:left;
  clear: left;
  width: 70px;
}
</style>
<dl>
  <dt>Row1</dt>
  <dd>Value1</dd>
  <dt>Row2</dt>
  <dd>Value2</dd>
  <dt>Row3 with longer title requiring line breaks</dt>
  <dd>Value 3</dd>
  <dt>Row4</dt>
  <dd>Value4</dd>
  <dt>Row5</dt>
  <dd>Value5.1</dd>
  <dd>Value5.2</dd>
  <dt>Row6</dt>
  <dd>Value6.1</dd>
  <dd>Value6.1</dd>
  <dd>Value6.1</dd>
</dl>

How can I align the items to look like a table, i.e.:

  • Have DT in the left column and the DDs in the right column
  • rowX and valueX top-aligned
  • Multiple DDs (for one DT) listed beneath each other

I found multiple related questions here, here and here, but with neither I managed to top-align the different situation (DT being higher than DD, multiple DDs being higher than DT).

Community
  • 1
  • 1
Peter Albert
  • 16,917
  • 5
  • 64
  • 88

2 Answers2

4

I think this solution will be in line with what you want with some minor tweaking. Basically, you need to also float all of the dds, but you need to clear them so that they stack vertically. However, you cannot clear the first one since you need the dt to float to the left. The + (next sibling) selector is handy for this since you can override the clear rule on the first dd that follows a dt. You may also need to update the margins of the other dds.

dl {width: 300px}
dt {
  float:left;
  clear: left;
  width: 70px;
}
dd {
    clear: left;
    float: left;
    margin-left: 70px;
}
dt + dd {
    float: left;
    clear: none;
    margin-left: 0;
}

http://jsfiddle.net/8VKng/2/

Explosion Pills
  • 188,624
  • 52
  • 326
  • 405
  • Just tried to implement it in the real site, but got stuck again. If the `DT` has a line break, the next `DD` is misaligned - see the red DD in http://jsfiddle.net/8VKng/10/ . Thanks for your help! – Peter Albert Apr 02 '13 at 06:55
  • @PeterAlbert unfortunately I don't think that a pure CSS solution is possible for *exactly* what you want because some measurements can't be known ahead of time, but this is as close as I could come: http://jsfiddle.net/8VKng/11/ -- `float: right` is used because otherwise there may be an extra margin to the left; if that's no good, you need a set width + `text-align: left` on the `dd`s as well: http://jsfiddle.net/8VKng/12/ – Explosion Pills Apr 02 '13 at 13:56
  • Thanks a lot! Will try to make the best of it! – Peter Albert Apr 02 '13 at 14:00
2

I would use Bootstrap to handle the DL for you.

Bootstrap Description List

They have two options and you could also customize their setup for your liking. Just a suggestion.

.dl-horizontal:before,
.dl-horizontal:after {
    display: table;
    content: "";
    line-height: 0;
}
.dl-horizontal dt {
  float: left;
  width: 160px;
  clear: left;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dl-horizontal dd {
  margin-left: 180px;
}

http://jsfiddle.net/rzWnG/1/

This what bootstrap uses to make a horizontal DL. I motified it a bit to look better for what you are wanting. I used Explosion Pills html from his JSfiddle. For that, I will give him an upvote.

Try this. It would help a bit more to get an exact of what you are wanting.

ralliart2004
  • 75
  • 1
  • 3
  • 9
  • Unfortunately, I cannot use Bootstrap. :-( – Peter Albert Apr 01 '13 at 22:11
  • @PeterAlbert I feel for you. Are you wanting it done similarly to the horizontal decsription list in the bootstrap docs I linked? I could check the bs core for ya and see how they styled it to assist. – ralliart2004 Apr 01 '13 at 22:14
  • Thanks - this solution works!!! +1. Just accepted ExplosivePills answer though, as it was slightly quicker! Thanks a lot for your effort! – Peter Albert Apr 01 '13 at 22:30
  • Not that an answer selection matters but you are able to switch your answer. Glad I could be of help. – ralliart2004 Apr 01 '13 at 22:33
  • Just tried to implement it in the real site, but got stuck again - if I remove the `nowrap`, the alignment does not work - see http://jsfiddle.net/rzWnG/5/ . Thanks for your help! – Peter Albert Apr 02 '13 at 06:54
  • What was the problem you encountered in the live site? The no Wrap is needed for the css I provided to look good. You adjusted the column widths as well. Did you get your problem fixed or do you still need help? – ralliart2004 Apr 02 '13 at 16:21