title: CSS height calculation doesn't add up
body: <p>I have the following code:</p>
  
  <pre><code>&lt;div id="headerwrap"&gt;
   &lt;div id="headertop"&gt;aaa&lt;/div&gt;
   &lt;div id="headermiddle"&gt;abc&lt;/div&gt;
   &lt;div id="headerbottom"&gt;def&lt;/div&gt;
  &lt;/div&gt;
  #headerwrap      { position:fixed; top:0; left:0; } 
  #headertop       { height:55px; margin:0 auto; }
  #headermiddle    { height:25px; margin:0 auto; }
  #headerbottom    { height:9px; margin:0 auto; }
  </code></pre>
  
  <p>I am trying to follow the header with a fixed position . When I do this I find an overlap. Checking with firebug I find the following:</p>
  
  <pre><code>headerwrap height - 91px
  headertop height - 55px
  headermiddle height - 25px
  headerbottom height - 9px
  </code></pre>
  
  <p>Can anyone explain to me why the numbers don't add up? This is giving me position problems and I can't see what's wrong.</p>
  
  <p>Why does 55+25+9 add up to 91?</p>