Inheriting Width when child is position fixed

Question

I am trying to have a header div inherit it's width from it's parent. The header div is position fixed.

However, as you can see in the simple PLNKR i've created here:

http://plnkr.co/edit/wxcvssALhjxtzc7J4w3V

it is actually wider than it's parent element, which is very weird.

The html looks like this:

<div class="category-body">We are in the category-body
  <div class="category-header">We are in the category-header</div>
</div>

And the CSS looks like this:

.category-body {
    margin-left: 17% !important;
    width: 67%;
    background-color: red;
    height: 500px;
}

.category-header {
    position: fixed;
    top: 51px;
    width: inherit;
    background-color: green;
}

Any ideas why this is happening? And, of course, how to fix it?

Possible duplicate of https://stackoverflow.com/questions/17806852/set-a-fixed-div-to-100-width-of-the-parent-container — Tennyson H, Nov 28 '15 at 17:38

score 1 · Answer 1 · answered Nov 28 '15 at 17:43

1

You are not using a reset css sheet so probably the browser's body margin by default is messing with your code. It will affect your parent as the position is static but it will NOT affect your fixed child as fixed elements get out of the html flow.

just add:

html, body {margin:0;}

FIDDLE

answered Nov 28 '15 at 17:43

Alvaro Menéndez

8,766
3
37
57

HI Alvaro - that works really well in the plnkr. However, in my real world version, that is a bit more complex, it doesn't do the trick. What other places might be throwing it out do you think? – Tom O'Brien Dec 08 '15 at 16:36
I just can recomend you to use a reset css sheet at the start of every project you make. more documentation here: http://cssreset.com/ I can't help you anymore unless I could inspect with crhome (or similar) tools the whole web. – Alvaro Menéndez Dec 09 '15 at 12:29

Inheriting Width when child is position fixed

1 Answers1