Can an inner div always be made to have the width of the full browser window regardless of its parent's width settings and dimensions? Additionally, can this div be positioned at the left side of the page with a CSS property of left: 0, relative to the body element?
While attempting to achieve this, I managed to set the correct width for the inner div but encountered an issue where the content below it moved up rather than sitting underneath. Furthermore, I struggled to figure out how to move the div all the way to the left at 0.
To add complexity, is it feasible to accomplish this using only CSS2 without utilizing CSS3?
.full-page-width {
position: absolute;
left: 0;
right: 0;
width: 100%;
}
<div class="container">
<div class="row">
<div class="col-md-8">
<p>I should sit above Foo</p>
<div class="full-page-width">
<p>Foo</p>
</div>
<p>I should always sit below Foo</p>
</div>
</div>
</div>