Question

I have the following code:

<div id="headerwrap">
 <div id="headertop">aaa</div>
 <div id="headermiddle">abc</div>
 <div id="headerbottom">def</div>
</div>
#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; }

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:

headerwrap height - 91px
headertop height - 55px
headermiddle height - 25px
headerbottom height - 9px

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.

Why does 55+25+9 add up to 91?

Answer 1

I get 89px, here’s a demo.

Are you sure that’s all the CSS and that there aren’t borders or extra styles on any of the elements?

EDIT: Just seen your comment on the other answer 🙂