I've run into a challenge while attempting to position a sidebar over page wrappers. The issue with absolute positioning arises when the sidebar needs to align with the corner of the blue header. I have contemplated using JavaScript to maintain its current position and calculate the height, but I am unsure if that is the most efficient solution. I am open to suggestions. Here's a link to JSFiddle (please zoom out), and the code is provided below:
<style type="text/css>
* {margin: 0 auto; text-align: center; font-size: 42px; color: #fff; font-weight: bold;}
.global {width: 1200px; margin: 0 auto;}
#slider {height: 354px; width: 100%; max-width: 1400px; min-width: 1200px; height: 100%; min-height: 354px; background-color: red;}
#container {position: relative; background-color: beige;}
#headerWrapper {height: 200px; background-color: aqua;}
#header {height: 200px; background-color: blue;}
#contentWrapper {height: 300px; background-color: black;}
#content {height: 300px; background-color: pink;}
#listingWrapper {height: 500px; background-color: green;}
#listings {height: 500px; background-color: orange;}
#footerWrapper {height: 200px; background-color: cyan;}
#footer {height: 200px; background-color: grey;}
#sidebar {background-color: yellow; width: 240px; height: 170%; position: absolute; left: 2.5%; top: 0;}
</style>
<div id="headerWrapper">
<div id="header" class="global">
Header
</div>
</div>
<div id="container">
<div id="sidebar">
</div>
<div id="slider">
Slider
</div>
<div id="contentWrapper">
<div id="content" class="global">
Top Content
</div>
</div>
<div id="listingWrapper">
<div id="listings" class="global">
Bot Content
</div>
</div>
</div>
<div id="footerWrapper">
<div id="footer" class="global">
Footer
</div>
</div>
Theoretically, the placement of the sidebar would initiate at the upper left corner of the dark blue header, extending over the slider and concluding at the footer. It must not exceed the global width: 1200px;. While employing an absolute position method complicates matters, introducing a relative container with a fixed width compromises the distinct backgrounds of other containers.