I am looking to create a fixed header that allows the content (body) to scroll underneath it. The challenge arises when the parent element has some margin-right, causing the fixed header to extend beyond the parent's width and occupy 100% of the window instead.
Any suggestions on how to address this issue?
For reference, here's an 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;
}