You, dear reader, are almost certainly one of the most talented CSS experts on the planet. No, don’t blush; everybody says it.
So here’s a challenge for you. I have a defintion list. It’s a glossary—a collection of terms and definitions. Semantically, therefore, it’s indisputably correctly marked up as
dt and one or more
dds, all wrapped in a single
dl. (It’s not a naughty
dl in a
form or any misuse like that).
I want to style it in a way that’s very common for glossaries—term on the left, and all the different definitions on the right. Each new term starts a new “row” for want of a better word. It needs to be robust; some terms are longer than their definitions; some terms have multiple definitions.
I can’t do it.
If I add a non-semantic (and invalid)
div around each term and its definition(s), then
float:left; clear:left;, it works perfectly. But without that meaningless extra element, it looks minging. (Colours and the classes used to add those are just for illustration.)
Whichever way I try (absolute positioning, using
display:table-*, inserting generated content and floating and clearing that), I can’t get it to look as I want it.
It’s obviously a common problem. The HTML 5 group declined to add a
di (definition item) grouping element to solve this, rightly saying
This is a styling problem and should be fixed in CSS. There’s no reason to add a grouping element to HTML, as the semantics are already unambiguous.
So, dear reader: can you do it? There’s free entry to standards.next and a snog with tongues for the lucky winner.
Rules: you can’t change the markup. This would be easy to do with multiple
dls, but it isn’t a series of lists: it’s one list of multiple terms. And, yes, it could be marked up as a
table, but it isn’t a table, it’s a list of definitions and we all know that tables for layout is evil.
(This isn’t me just being lazy; Molly is attending the CSS Working Group’s face-to-face
PARTAAAY!! meeting, and we were discussing things to bring up there.)