title: CSS Working in Chrome but not Firefox ( div height )
body: <p>I have been building a website and mainly testing it in Chrome.
  Recently I realised some of the CSS does not apply in Firefox.</p>
  
  <p>I guess it's probably : main { min-height }</p>
  
  <p>This jFiddle reproduces this error, where the main div doesn't have the height it's supposed to. <a href="http://jsfiddle.net/msW9m/" rel="noreferrer">http://jsfiddle.net/msW9m/</a></p>
  
  <p>HTML :</p>
  
  <pre><code>&lt;div id='main'&gt;&lt;/div&gt;
  &lt;div id="container"&gt;&lt;/div&gt;
  &lt;div id='footer'&gt;
      &lt;div id='footerRelative'&gt;Development by &lt;a href='mailto:'&gt;John Doe&lt;/a&gt;&lt;/div&gt;
  &lt;/div&gt;​
  </code></pre>
  
  <p>CSS :</p>
  
  <pre><code>#main {
      min-height: 80%;
      height: auto;
      border: 1px solid #bbbbbb;
      margin: 3% 5% 1%;
      padding: 10px 10px;
  }
  #footer {
      position: absolute;
      left: 50%;
  }
  #footerRelative {
      position: relative;
      left: -50%;
      font-size: 80%;
  }
  /*Probably Irrelevant*/
  #container {
      margin: 0 auto;
      margin-top: -300px;
      margin-left: -261px;
      position: absolute;
      top: 50%;
      left: 50%;
      width: 523px;
      height: 600px;
      background-image: url('../images/doctorSymbol.jpg');
      background-repeat:no-repeat;
      background-position:center;
      opacity: 0.125;
      overflow: hidden;
      z-index: -1;
  }
  </code></pre>
  
  <p>However, in Chrome everything works perfectly and the main div has a min-height of 80% . I was wondering if there is a workaround to this or If I am doing something wrong.</p>
  
  <p>Thank you.</p>