Search code examples
cssmarginborder-box

Margin of header is added to body (how to solve it ?)

I try to solve this problem for hours ... I tried a few tricks, some small hack, I also tried to add positions "relative, absolute...Etc", some "top", top add a invisible not fixed div behind the fixed and others, but I want the cleanest solution possible and to know WHY have I got this problem.

: I have a menu "fixed" to the top, and a header. The header is behind the menu (normal), but the problem is that when I add a margin to the header, it adds a margin to the body, while I want to add margin to the header INSIDE the body, just place the header under the menu without position:relative+top:Xpx. And use "box-sizing: border-box" doesn't change anything

http://jsfiddle.net/WdNz4/

<div id="menu">
</div>

<div id="header">
    test1(Success)<br>test2<br>test3(Lose)<br>test4<br>test5
</div>

(can't post my css, little bug, go to jsfiddle)

Thanx in advance for your help !

Solution

  • Add top:0; property to your #menu:

    #menu {
    height: 40px;
    width: 100%;
    position: fixed;
    background-color: red;
    top:0; 
}

    JSFiddle: http://jsfiddle.net/WdNz4/4/