title: Styling definition lists - IE clear:both bug
body: <p>I'm trying to style a definition list properly. So far I've got the style that I wanted in Firefox 3.5 and IE 8 but I couldn't get IE6 and IE7 to behave properly... I've already tried any kind of hack and trickery I could possibly think of.</p>
  
  <p>It seems like the "clear:both" on the dt doesn't work in IE&lt;=7...</p>
  
  <p>Below is the "test page" that I'm using. The markup of the definition list is built on purpose: I wanna test different scenarios such as multiple definitions or empty one.</p>
  
  <p>Check it in Firefox > 3.5 to see how it should look like.</p>
  
  <p>Cheers!!!</p>
  
  <pre><code>    &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
    &lt;head&gt;
      &lt;title&gt;&lt;/title&gt;
   &lt;style type="text/css"&gt;
    body { font-family: Arial; font-size: 62.5%; }
    * { margin: 0; padding: 0; }
    #main { font-size: 1.4em; }
    dt { font-weight: bold; }
    hr { clear: both; }
  
    dl.aligned { width: 300px; }
    .aligned dt { clear: both; float: left; margin: 0 0 0.5em 0; width: 100px; }
    .aligned dd { clear: right; float: right; margin: 0 0 0.5em 10px; width: 190px; }
  
   &lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;
   &lt;div id="main"&gt;
    &lt;dl class="aligned"&gt;
     &lt;dt&gt;First title&lt;/dt&gt;
     &lt;dd&gt;1.1 definition&lt;/dd&gt;
     &lt;dd&gt;1.2 definition - very long to test wrapping&lt;/dd&gt;
     &lt;dd&gt;1.3 definition&lt;/dd&gt;
     &lt;dt&gt;Second title&lt;/dt&gt;
     &lt;dd&gt;&lt;/dd&gt;
     &lt;dd&gt;&lt;/dd&gt;
     &lt;dt&gt;Third title&lt;/dt&gt;
     &lt;dd&gt;3.0 definition&lt;/dd&gt;
     &lt;dt&gt;Fourth title - very long to test wrapping&lt;/dt&gt;
     &lt;dt&gt;Fifth title&lt;/dt&gt;
     &lt;dt&gt;Sixth title&lt;/dt&gt;
     &lt;dd&gt;6.0 definition&lt;/dd&gt;
  
    &lt;/dl&gt;
   &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>