Search code examples
csspositionfixed

CSS header position:fixed causing body div to dissappear

To keep it short here's the example of the problem.

http://jsfiddle.net/2KTFG/1101/

see the first paragraph dissappears behind the header

html

<div id='header'>
    <div id="div_1">
        <p>hello</p>
    </div>
    <div id= "div_2">
        <p>hello</p>
    </div>
</div>
<div id='body'><p>why this goes behing previous div?</p>
    <p>why this goes behing previous div?</p>
    <p>why this goes behing previous div?</p>
</div>

css:

#header {
    position: fixed;
    top: 0px;
    height: 50px;
    width: 100%;
    background: green;
}
#div_1 {
       margin: 0 auto;
}

#div_2 {
    margin: 0 auto;
}
#body{ margin-top: 30px; height: 3000px; overflow: auto; }

thanks in advance

Solution

  • Because you set the margin of your body to 30 and the height of the header to 50px.