Grouping of dl items - html

Question

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?

Answer 1

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;}

Answer 2

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;
}

Answer 3

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?

Answer 4

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.