title: Firefox CSS position issue
body: <p>I am having a problem with the positioning of a footer div which is supposed to pin everything within the div to the bottom of the page. It is working on Chrome, IE and Edge etc... But on firefox, this is problematic, as the div contents fail to stay at the bottom of the page.</p>
  
  <p>I figured it would be easier for you to see this yourselves, so here is the link to the page in question for you to make judgements and hopefully help me with this.</p>
  
  <p>You will see this word 'News:' fading in and out on the page.</p>
  
  <p><a href="http://goo.gl/xOg4uN" rel="nofollow">http://goo.gl/xOg4uN</a></p>
  
  <p>Here is the CSS, however:</p>
  
  <pre><code>* {margin:0;padding:0;} 
  html, body {height: 100%;}
  #wrap {min-height: 100%;}
  
  #main {
  overflow:auto;
  padding-bottom: 180px; /* must be same height as the footer */
  }
  
  #footer {
  position: relative;
  margin-top: -180px; /* negative value of footer height */
  height: 180px;
  clear:both;
  } 
  
  /*Opera Fix*/
  body:before {
  content:"";
  height:100%;
  float:left;
  width:0;
  margin-top:-32767px;
  }
  </code></pre>