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.

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”.

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.)


 * 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).

San Diego
San Francisco
White Sox
Saint louis
Los Angeles
Kansas City


 * 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)
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;
dd {
    border-top: 1px solid #999;