0

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;
}
fusio
  • 3,595
  • 6
  • 33
  • 47

1 Answers1

0

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.

Stefan
  • 1,905
  • 7
  • 24
  • 38
  • why not the best solution? it works.. small issue though: what if I wanted to add `display: table` to the fixed div? http://jsfiddle.net/4u0c85k8/3/ – fusio Nov 07 '14 at 13:23
  • Look around here display and position dont work together very well :( maybe you can find a solution here: http://www.w3.org/TR/CSS2/visuren.html#dis-pos-flo – Stefan Nov 07 '14 at 13:27
  • I tricked it by adding another container which is fixed, with inside the header which is table-view. – fusio Nov 07 '14 at 15:05