CODEWITHSUNDEEP
javascriptjqueryhtmlcssfrontend
Howdy_McGee
Howdy_McGee

Reputation: 10635

CSS Layout Issue - Position Sidebar Over Wrappers

This is driving me nuts but I'm trying to position a sidebar over page wrappers. The problem with absolute positioning is that the sidebar needs to be aligned with the corner of the header (blue). I thought about JS to keep it in the current position, and also calculate the height but I wasn't sure if that was the most efficient method. I'm open to ideas, Here's a link to JSFiddle (you'd have to zoom out), code 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>

Theoritically, the sidebar would start at the top left corner of the dark blue header, over the slider, and stop at the footer. It shouldn't leave the global width: 1200px;. With a position absolute, it muddies the waters, and if I add a relative container with a static width, I lose the other container background colors.

Upvotes: 1

Views: 255

Answers (2)

Howdy_McGee
Howdy_McGee

Reputation: 10635

This is the solution I found but I'll leave it open to see if anybody else has an idea. What I'm doing is getting the offset of my header then moving the sidebar according to my headers offset left. I do this whenever the document loads or if the user resizes their screen.

$(document).ready(function(){
    var offset = $('#header').offset();
    $('#sidebar').css('left', offset.left+'px');
});

$(window).resize(function(){
    var offset = $('#header').offset();
    $('#sidebar').css('left', offset.left+'px');
});

Upvotes: 1

Ani
Ani

Reputation: 4523

Here: http://jsfiddle.net/Jmh4B/2/ 

 #sidebar   
 {
    left: 0;
 }

Upvotes: 0

Related Questions