Bruce Lawson recently asked for ways to style a definition list in the common glossary format. This is one way to do it.

Bruce’s original post – css challenge – describes what he is after: a “glossary style” appearance with the term on the left and the definitions on the right. Some terms will have multiple definitions, definitions of varying length, and each new term should appear on a new line. A definition list is semantically correct for this kind of information, so there was to be no fiddling around with the HTML, and the browser requirements were for it to work in all modern browsers and IE 6+.

You can skip straight to the demo where some additional classes are included in the HTML in order to highlight each term-definition association.

The basic HTML

The basic HTML structure is a simple definition list and nothing more. There are some short, long, and multiple definitions for each term.

<h1>Styling definition lists</h1>
<dl>
  <dt>Cheese</dt>
  <dd>
    <p>Velit esse cillum dolore in reprehenderit in voluptate duis aute irure dolor. Consectetur adipisicing elit, excepteur sint occaecat sunt in culpa. Velit esse cillum dolore eu fugiat nulla pariatur. Ut aliquip ex ea commodo consequat.</p>
    <p>Mollit anim id est laborum. Ut enim ad minim veniam, consectetur adipisicing elit, ullamco laboris nisi. Lorem ipsum dolor sit amet, sunt in culpa quis nostrud exercitation.</p>
  </dd>
  <dd>yummy!</dd>

  <dt>Building flexibility through spreading knowledge and self-organization, exploiting the productive lifecycle to experience a profound paradigm shift. Through the adoption of a proactive stance, the astute manager can adopt a position at the vanguard.</dt>
  <dd>balderdash</dd>;
  <dd>poppycock</dd>

  <dt>Aardvark</dt>
  <dd>never hurt anyone</dd>
</dl>

The styles

In order to get the required appearance in all browsers I had to use negative margins and a few conditional styles to get IE7 and IE6 to play along.

For the purposes of the demo I’ve placed all the styles in <style> blocks in the head of the document.

<style>
   dl {padding-left:300px;}
   dt {clear:both; float:left; width:260px; padding:10px; margin:0 0 2em -300px; font-weight:bold; color:#686663;}
   dd {float:left; width:100%; padding:10px 0; margin:0 0 2em;}
</styl>
<!--[if lte IE 7]>
<style>
   dt {display:inline; margin-bottom:0;}
   dd {float:none; width:auto;}
</style>
<![endif]-->

That’s it. The widths of the <dt> can be set in ems or percentages if the layout requires. The complete code is available in the demo and you are free to use this code.