Tom O'Brien Tom O'Brien - 21 days ago 7
CSS Question

Inheriting width from Bootstrap container when child is position fixed

I am trying to have a header div inherit its width from its parent. The header div is

position: fixed
. The parent is contained inside a bootstrap container.

However, as you can see in the code I've created, it is not correctly inheriting the width of its parent - it is adding some extra width from somewhere.

This is all very annoying! Any idea how to fix 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;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="category-body">We are in the category-body
<div class="category-header">We are in the category-header</div>
</div>
</div>





http://plnkr.co/edit/yVk15RqDqAac4H2eDJQe

Answer

The problem stems from using a percentage value on the parent width. Browsers seem to have a problem with this. (Tested on Chrome, FF & IE11.)

If you use pixel values the problem goes away.

Revise PLUNKR

From another answer:

It seems as though the static value (250px) can be propagated through normal inheritance. Whereas when the relative value (90%) is being used, the fixed div has already been taken out-of-flow, and now inheritance-wise, it's parent is the viewport.

Learn more here:

Comments