DL-DT-DD list with images

This shows how to style a DL-DT-DD list with the DL tag floated left, but remaining on the same line as the DD element. Because it makes use of the :after pseudo-element, this technique should not work in IE7, but by some quirk of IE's rendering it does. It also works with multiple DT elements per DD, but not with multiple DD elements per DT. The DIV.overflow inside each DD is optional. It keeps the entire contents of the DD as a column to the right of the DT (it prevents the content from wrapping down under the DT content). I originally wanted to put the `overflow: hidden;` on the DD element, but that prevented the :after pseudo-element from clearing the DT element properly. The single extra DIV.overflow inside each DD solved the problem of getting the DD content back into a pseudo "column".

HTML

<p>A <b>fish</b> is any member of a <a href="http://en.wikipedia.org/wiki/Paraphyletic" title="Paraphyletic">paraphyletic</a> group of organisms that consist of all <a href="http://en.wikipedia.org/wiki/Gill" title="Gill">gill</a>-bearing <a href="http://en.wikipedia.org/wiki/Aquatic_animal" title="Aquatic animal">aquatic</a> <a href="http://en.wikipedia.org/wiki/Craniate" title="Craniate">craniate</a> animals that lack <a href="http://en.wikipedia.org/wiki/Limb_(anatomy)" title="Limb (anatomy)">limbs</a> with <a href="http://en.wikipedia.org/wiki/Digit_(anatomy)" title="Digit (anatomy)">digits</a>. Included in this definition are the living <a href="http://en.wikipedia.org/wiki/Hagfish" title="Hagfish">hagfish</a>, <a href="http://en.wikipedia.org/wiki/Lamprey" title="Lamprey">lampreys</a>, and <a href="http://en.wikipedia.org/wiki/Chondrichthyes" title="Chondrichthyes">cartilaginous</a> and <a href="http://en.wikipedia.org/wiki/Bony_fish" title="Bony fish">bony fish</a>, as well as various extinct related groups. Most fish are <a href="http://en.wikipedia.org/wiki/Ectotherm" title="Ectotherm">ectothermic</a> ("cold-blooded"), allowing their body temperatures to vary as ambient temperatures change, though some of the large active swimmers like <a href="http://en.wikipedia.org/wiki/White_shark" title="White shark">white shark</a> and <a href="http://en.wikipedia.org/wiki/Tuna" title="Tuna">tuna</a> can hold a higher core temperature.<sup id="cite_ref-1"><a href="http://en.wikipedia.org#cite_note-1"><span>[</span>1<span>]</span></a></sup><sup id="cite_ref-2"><a href="http://en.wikipedia.org#cite_note-2"><span>[</span>2<span>]</span></a></sup> Fish are abundant in most bodies of water. They can be found in nearly all aquatic environments, from high mountain streams (e.g., <a href="http://en.wikipedia.org/wiki/Salvelinus" title="Salvelinus">char</a> and <a href="http://en.wikipedia.org/wiki/Gudgeon_(fish)" title="Gudgeon (fish)">gudgeon</a>) to the <a...

CSS

body {
  font: 12px Arial, sans-serif;
  margin: 20px;
}

.fish {
  overflow: hidden;
  margin: 2em 0 .8em;
  }
  .fish dt, .fish dd {
    margin: 0 0 1em;
  }
  .fish dt {
    clear: both;
    float: left;
    margin-right: .8em;
    }
    .fish dt img {
      border: 10px solid #ecddc6;
      vertical-align: top;
      width: 140px;
    }
  .fish dd {
    }
    .fish dd:after {
      content: '';
      display: table;
      clear: both;
    }
    .fish dd .overflow {
      overflow: hidden;
    }
    .fish dd h3 {
      font-weight: bold;
      font-size: 1em;
      margin: 0;
    }
    .fish dd p {
      margin: 0 0 .8em;
    }