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>
67%
? – Strongholdposition: fixed
to an element you remove it from the document flow. The element then has no parent, so there's nothing to inherit. More details here – Sassafras67%
. It just doesn't work because the percentage is relative to the viewport and not the same container as the parent. The width is inherited. For instance, if the parent's width was300px
, it would work as expected. It just won't always work with percentage-based widths. – Stronghold