title: gap under div in firefox
body: <p>I have this html with a wordpress theme</p>
  
  <pre><code>div class="fullWidthDarkBlue"&gt;
  &lt;div class="hpRentArrears"&gt;
  &lt;section id="black-studio-tinymce-8" class="widgetcontainer widget_black_studio_tinymce"&gt;&lt;div class="textwidget"&gt;&lt;h2&gt;Rent Arrears&lt;/h2&gt;
  &lt;p&gt;Does ...t on your behalf.&lt;/p&gt;
  &lt;/div&gt;
  &lt;/section&gt;
  &lt;/div&gt;
  &lt;div class="clearer"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="footer"&gt;...
  </code></pre>
  
  <p>And some css like this:</p>
  
  <pre><code>#footer {
  margin-top:0px;
  border:none;
  }
  
  .fullWidthDarkBlue {
  width:100%;
  background:#365162;
  padding-top:30px;
  }
  
  .hpRentArrears {
  width:346px;
  float:left;
  background:#f2f1ed;
  border:2px solid #a7cfdb;
  }
  
  .hpRentArrears p {
  margin:0;
  }
  
  .clearer {
  clear:both; 
  }
  </code></pre>
  
  <p>All works well except in FF there is a gap between the bottom of the dark blue box and the footer. I find I can remove this gap by putting a border onto the #footer - but I don't really want to </p>
  
  <p><img src="https://i.stack.imgur.com/Xd1Of.jpg" alt="shows offending gap"></p>
  
  <p>What's causing the gap and how do I get rid of it?</p>