Glossary and Table Layout

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

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.

CSS

/* 
 * overflow and width will enclose the floats across browsers
 */
dl {
  width:90%;
  margin:20px auto;
  overflow:hidden;
}
/*
 * DTs are floated to the left (in all browsers)
 * The margin is to make the vertical borders overlap
 */
dt {
  float:left;
  width:160px;
  clear:both; 
  padding:3px 20px 4px 0;
  padding-bottom:15px;
  margin-right:-1px;
  border-right:1px solid #999;
  position:relative;
}
/*
 * DDs are floated to the right (in decent browsers)
 */
dd {
  float:right;	
  width:519px;
  padding:3px 0 15px 20px;
  border-left:1px solid #999;
  margin-left:0;
}
/*
 * In IE 6/7, DDs cannot be floated because of a IE bug
 * (DTs would fail to clear DDs properly)
 * Note that if this styling works it is because of another IE bug ;-)
 */
dd {
  *float:none;
  *width:auto;
  *margin-left:180px;
}
/*
 * some extra styling for non IE 6/7 browsers
 */
dt:before {
  content:"";
  width:30px;
  position:absolute;
  border-top:1px solid #999;
  top:-5px;
	right:-15px;
}
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

/*
 * These rules will display DTs/DDs as columns.
 * Constructs must follow a key/value pair pattern.
 * The three last declarations are meant to kill white space between DTs/DDs 
 * (result of inline-block styling)
 */
dl {
  width:50%;
  margin:20px auto;
  border-bottom:1px solid #999;
  letter-spacing:-0.31em;
  *letter-spacing:normal;
  word-spacing:-0.43em;
} 
/* 
 * In this rule, we reset the white-space (see hack above)
 * The width + left/right padding of DTs/DDs equals 50% (for 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;
  border-top:1px solid #999;
}
/*
 * To keep things tight
 */
dt {
  margin-right:-1px;
}