Question

I’m having a problem where the top div is about 20px from the top of the viewport when it should be at the top:

HTML:

<div id="top">
</div>
<div id="bottom">
    <p>some text</p>
    <p>some text</p>
    <p>some text</p>
    <p>some text</p>
    <p>some text</p>
</div>

CSS:

body {
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
}

#top {
    width: 100%;
    height: 50px;
    background-color: #00c;
    position: fixed;
}

If I remove position: fixed from #top, the result is as expected, the #top div is right against the top.

How can I make the #top div against the top of the viewport, if #top has position:fixed?

P.S. (I can’t make demo on http://jsfiddle.net, because the problem is not visible there.)

Answer 1

This was really hard to understand, but I think you want the position to be fixed and the div to touch the top?

Add top: 0px; to #top.