CODEWITHSUNDEEP
htmlcsslayout
Svish
Svish

Reputation: 158101

Grouping of dl items

Say you have this definition list (the number of "sets" is not important, just that there are more than one).

<dl>
  <dt>Authors
  <dd>John
  <dd>Luke

  <dt>Editor
  <dd>Frank
</dl>

I'd like to have these definitions go horizontally. So that you'd get something like this:

Authors    Editor
John       Frank
Luke

And if you resized the browser so it was too narrow, it would wrap like this:

Authors
John
Luke

Editor
Frank

Is there a way to do this in a good way?

If I've understood correctly the only legal elements in a dl is the dt and dd items, so I can't wrap them in div elements or anything like that. I could split them up in separate dl lists, but that wouldn't really be correct either, as it really should be one list. Any ideas?

Upvotes: 2

Views: 512

Answers (5)

Renaat De Muynck
Renaat De Muynck

Reputation: 3347

The specs allow for each group inside a dl to be wrapped inside a div element:

In order to annotate groups with microdata attributes, or other global attributes that apply to whole groups, or just for styling purposes, each group in a dl element can be wrapped in a div element. This does not change the semantics of the dl element.

— https://html.spec.whatwg.org/multipage/grouping-content.html#the-dl-element

Use this div to apply the necessary styling (e.g. flex).

Upvotes: 2

Matt Coughlin
Matt Coughlin

Reputation: 18906

There's no valid tag to wrap a pair of dt and dd tags together. A di element was proposed for XHTML 2.0, but XHTML 2.0 never succeeded.

Since there's a pair of inner tags for each item, it's not like a ul, where each li tag can act as an inner wrapper for the content of each list item (in this case acting as a wrapper for each column).

Basically, either use a dl or a ul for each column. Semantic markup is nice, but without a di, a single dl isn't well equipped for this type of layout.

Edit:

As @biziclop mentioned, once CSS3 Multiple-column layout is standardized and supported, it may be possible to break the columns at the correct places (with limited options beyond that layout-wise). Eventually, the code would look something like this:

dl {column-width:100px; column-fill:auto;}
dt {break-before:always;}

Upvotes: 1

Lee Kowalkowski
Lee Kowalkowski

Reputation: 11751

It's possible with some absolute positioning and nth-of-type selectors (not recognised by old browsers - yuck! - but neither is the media query, so should degrade OK): Demonstration: http://jsfiddle.net/PrJWJ/6/

dt,dd{margin:0;}

@media (min-width:20em) /* 10em per column */
{
    /* Enable positioning*/
    dl{position:relative;}
    dt,dd{position:absolute;}

    dt{top:0;} /* All terms at the top */
    dd{top:1.3em;}  /* 1st dd under a term at 1.3em (factoring in line spacing) */
    dd+dd{top:2.6em;} /* 2nd dd under a term */

    /* 1st column */
    dt:nth-of-type(1),
    dt:nth-of-type(1)~dd
    {left:0;}

    /* 2nd column */
    dt:nth-of-type(2),
    dt:nth-of-type(2)~dd
    {left:10em;}
}

@media (max-width:19.99em)
{
    /* Space before a new term */
    dd+dt{margin-top:1em;}
}

However, you need to extend this according to your maximum-possible number of rows and columns.

Upvotes: 0

AnthonyS
AnthonyS

Reputation: 2469

I solved this issue using a set of undordered list: Please view it here: http://jsfiddle.net/radialglo/pXLB4/ Note that the width does not need to be set, but for demonstration purposes I set a large enough width so it would be pushed onto the next line. Drag the html viewport on the fiddle.

<div>
    <ul>Authors
        <li>John</li>
        <li>Luke</li>
    </ul>
    <ul>
    <li>Editor</li>
    <li>Frank</li>
    </ul>
</div>​

and this styling:

div ul{
    float: left;
    list-style: none;
    width: 100px;
    margin-bottom: 1em;
}​

If you're adamant about using your semantic, I'm not sure of a viable solution. This is because each definition term and its definitions aren't really grouped in a way that is easily stylable?

Upvotes: 0

biziclop
biziclop

Reputation: 14596

Let's play with css3's not-very-well-supported multi-column feature:

Cons:

  • requires fixed height
  • won't wrap (unless you write some media queries)

http://jsfiddle.net/rCQbP/5/

dl {
    -webkit-column-width: 100px;
       -moz-column-width: 100px;
            column-width: 100px;
    /* fixed height MUST be used */
    height: 200px;
}

dt ~ dt {
    /* simulate column-break-before: always; */
    margin-top: 1000px;
}

Upvotes: 0

Related Questions