Glossary and Table Layout

This article was first published on CSS-101 (01-27-2011).

Today I ran into an old post from Bruce Lawson (via @necolas).

In that post, Bruce challenges CSS authors to:

style [a definition list] 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. http://www.brucelawson.co.uk/

Below I show one way to do it, and also how to display DT/DD pairs in rows.

Definition List displayed as a Glossary

The content of the Definition Lists below is from the Glossary page on Wikipedia. It fits Bruce’s criteria: “some terms are longer than their definitions; some terms have multiple definitions”.

Glossary
An alphabetical list of terms in a particular domain of knowledge with the definitions for those terms...
Core glossary
A simple glossary or defining dictionary which enables definition of other concepts, especially for newcomers to a language or field of study.
A small working vocabulary and definitions for important or frequently encountered concepts, usually including idioms or metaphors useful in a culture.
Automatic extraction of glossaries
Computational approaches to the automated extraction of glossaries from corpora or the Web have been developed in the recent years.
Searching glossaries on the web
The search engine Google provided a service to only search web pages belonging to a glossary therefore providing access to a kind of compound glossary of glossary entries found on the web.

(Note: The original article was relying on a different technique which was oldIE-compatible, but less robust than this one.)

CSS

/*
 * overflow creates a block-formatting context
 * that contains all floats
 */
dl {
    margin: 20px auto;
    overflow: hidden;
    position: relative;
}
.glossary dt {
    float: left;
    width: 33%;
    clear: both;
    padding: 3px 2% 15px 0;
    position: relative;
}
.glossary dd {
    float: right;
    width: 62%;
    padding: 3px 0 15px 3%;
}
.glossary:before {
    content: "";
    width: 1px;
    position: absolute;
    border-left: 1px solid #999;
    top: 0;
    bottom: 0;
    left: 35%;
}
.glossary dt:before {
    content: "";
    width: 30px;
    position: absolute;
    border-top: 1px solid #999;
    top: -5px;
    right: -15px;
}
.glossary dt:after {
    content: "";
    width: 5px;
    height: 5px;
    background: #333;
    border: 1px solid #999;
    position: absolute;
    border-radius: 6px;
    top: -8px;
    right: -4px;
}

Definition List, term and description in rows

For this display to work, content must follow the key/value pair pattern (one DT for one DD).

Padres
San Diego
Giants
San Francisco
White Sox
Chicago
Rockies
Colorado
Cardinals
Saint louis
Athletics
Oakland
Dodgers
Los Angeles
braves
Atlanta
Indians
Cleveland
Royals
Kansas City
Phillies
Philadelphia
Orioles
Baltimore

CSS

/*
 * This is to kill white space between DTs/DDs when they
 * are displayed as columns (because of inline-block styling)
 */
.dl {
    letter-spacing: -0.31em;
    *letter-spacing: normal;
    word-spacing: -0.43em;
}
/*
 * Reset of the white-space hack
 * The width + left/right padding of DTs/DDs equals 50%
 * (to create two equal columns)
 */
dt,
dd {
    display: inline-block;
    *display: inline;
    zoom: 1;
    letter-spacing: normal;
    word-spacing: normal;
    vertical-align: top;
    width: 46%;
    padding: 3px 2% 4px;
    margin: 0;
}
/*
* To keep things tight
*/
dt {
    margin-right: -1px;
}
/*
* borders
*/
dl {
    border-bottom: 1px solid #999;
}
dt,
dd {
    border-top: 1px solid #999;
}

Share