Search code examples
cssmarginfixed

Margin on fixed div with width 100%?

I need a fixed header under which the content (body) can scroll. This header should be 100% of the parent, but the parent has some margin-right. The fixed header gets 100% width of the window instead of the parent.

How can this be fixed?

Example: http://jsfiddle.net/4u0c85k8/

HTML

<div id="parent">
    <div id="child">
        <div id="header">
            HEADER
        </div>
        <div id="content">
            CONTENT
        </div>
    </div>
</div>

CSS

#parent {
    width: 100%;
    border: solid 1px black;
}

#child {
    background-color: lightgray;
    margin: 0 8px;
    width: auto;
}

#header {
    position: fixed;
    height: 28px;
    top: 17px;
    background-color: lightgreen;
    width: 100%;
}

#content {
    margin-top: 36px;
    height: 1000px;
}
Solution

  • If you change width: 100% for this css:

    right:0px;
left: 0px;
margin-left:17px;
margin-right:15px;

    it works but i dont think its the best solution.