Creating a Definition LIst with Variable-Width <dt> and <dd> (Includes JSFiddle)

css, css-float, html, layout

Solution

Here is some CSS that may work:

dl {
    width: 400px;
    background-color: rgba(0, 0, 0, 0.2);
    overflow: auto;
}

dt {
    background-color: rgba(255, 0, 0, 0.3);
    float: left;
    clear: left;
    margin-right: 10px; /* Margin work */
    padding: 5px; /* Padding works */
}
dd {
    background-color: rgba(0, 255, 0, 0.3);
    display: table-cell;
    padding-left: 10px; /* Padding works */
    padding-bottom: 10px;
    margin-left: 100px; /* Margin does not work */
    margin-bottom: 100px;
}

Fiddle reference: http://jsfiddle.net/audetwebdesign/45jDK/

Explanation of Why It Works

(1) To see your background color, set `overflow: auto` for `dl`. Since all the child elements are floated, the height collapses to zero by default.

(2) You want `dt` to start on a new line, so use `clear: left` so that `dt` does not try to flow after a short `dd` element.

(3) For `dd`, using `display: table-cell` seems to do the trick.

On `dt`, `padding` and `margin` work as expected. On `dd`, `padding` works but `margin` has no effect, probably because of how `table-cell` works.

I tried this in Firefox but no where else.

PS I added some extra content on one of the `dt` elements to see how an extreme situation would render. I also experimented with the `width` of `dl` and the layout remains stable.

Problem

I have a definition list in which both term and definition are of varying widths.[EDIT: To clarify, when I say varying widths, I mean that they must not be fixed width. Obviously, this effect is easily achieved by setting the width of the `'] I need each pair to sit side-by side, with the becoming multi-line if necessary, without wrapping underneath the . Here is a JSFiddle showing my problem: http://jsfiddle.net/2H9YN/ (Code below) [EDIT: Please note that the colours are for reference only. They are not significant to the final design] I currently have this: But I want this: HTML: ``` <dl> <dt>dt: Lorem Ipsum</dt> <dd>dd: Lorem imperdiet </dd> <dt>dt: Lorem id libero in Ipsum</dt> <dd>dd: Lorem id libero in ipsum dolor </dd> <dt>dt: Lorem Ipsum</dt> <dd>dd: I should be sitting to the right of the previous dt and not wrapping round below it.</dd> <dt>dt: Lorem id libero in Ipsum</dt> <dd>dd: Lorem in ipsum dolor </dd> </dl> ``` CSS: ``` dl { width:400px; background-color: rgba(0, 0, 0, 0.2); float: left; } dt { clear:both; float:left; background-color: rgba(255, 0, 0, 0.3); } dd { float:left; background-color: rgba(0, 255, 0, 0.3); margin: 0 0 0 4px; } ``` Essentially I am looking for the `<dd>` to fill the space left to it by the `<dt>`, and if this means it needs to wrap, that it wraps below itself, not below the adjacent `<dt>`.

Original source