title: Styling DT to float left of DD
body: <p>I'm trying to style a definition list such that each <code>dt</code> floats to the left of its corresponding <code>dd</code> elements. I have used:</p>
  
  <pre><code>dt {
      clear: both;
      float: left;
      width: 6em;
  }
  dd {
      margin-left: 6.5em;
  }
  </code></pre>
  
  <p>which works as far as it goes. It nicely handles multiple <code>dd</code> elements per <code>dt</code> and <code>dd</code> text that is long enough to span multiple lines.</p>
  
  <p>However, I'd really like to be able to cope with multiple <code>dt</code> elements per <code>dd</code> (which is valid HTML) and <code>dt</code> elements that are taller than the corresponding <code>dd</code> elements (due to length of text causing the lines to wrap). At this point the styling falls apart and subsequent <code>dd</code> elements get out of line with their <code>dt</code>.</p>
  
  <p>I have tried various things such as floating the <code>dd</code> as well, which breaks alignment of multiple <code>dd</code> elements. Adding <code>dd + dd { clear: both; }</code> which almost works but now long <code>dd</code> text sits under its <code>dt</code> (not to mention older browsers not respecting the rule).</p>
  
  <p>Has anyone managed to do this? I really don't want to give up and use a table but maybe it's appropriate.</p>
  
  <p>My test markup is here: <a href="http://pastebin.com/nmAQ5Xdm">http://pastebin.com/nmAQ5Xdm</a></p>