title: IE7 line break inside div messes up bottom margin
body: <p>I noticed strange behavior in IE7 that does not occur in Firefox.
  If you notice in "testing 2" "div",when I add 2 line breaks at the bottom of this div,
  it does not respect margin set up for this div, and "test 3" div is right below it without margins. When I remove "br" then "test 2" and "test 3" divs have margins between them.</p>
  
  <p>Is this IE7 bug or is there a workaround for this?</p>
  
  <p>
  </p>
  
  <pre><code>    &lt;div style="border: dotted 1px red;"&gt;
  
      &lt;div id="main" style="border: solid 1px black; padding: 10px; margin: 5px; float:left "&gt;
      testing 1
  
  
         &lt;div style="border: solid 1px black; padding: 10px; margin: 10px;"&gt;
               testing 2
               &lt;br&gt;&lt;br&gt;       &lt;!--   THIS LINE --&gt;
           &lt;/div&gt;
  
  
          &lt;div style="border: solid 1px black; padding: 10px; margin: 10px; "&gt;
  
          testing 3
          &lt;/div&gt;
  
  
      &lt;/div&gt;
  
      &lt;div style="border: solid 1px black; padding: 10px; margin: 20px; float: left"&gt;
  
          testing 4
      &lt;/div&gt;
  
      &lt;div style="clear:both"&gt;&lt;/div&gt;
  
      &lt;/div&gt;
  
  &lt;\html&gt;&lt;\body&gt;
  </code></pre>