Question

I have a main content div that is 950px and has 0 auto margins so it’s centered. It has transparent content in it so can’t have a background color but I need the right and left margins to have a background-color. Is it possible to have a div that is placed absolute to the right of the div and stretch to the end of the window? I can do it on the left by giving it a negative absolute value but on the right it scrolls till the end of the div.

.mainwrapper {width:950px; margin:0 auto; height:800px; position:relative;}
.leftmargin {height:800px;width:1000px;position:absolute;top:0px;left:-1000px;}
.rightmargin {height:800px;width:1000px;position:absolute;top:0px;left:950px;}

HTML
<div class="mainwrapper">
<div class="leftmargin"></div>
<div class="rightmargin"></div>
</div>

Is there an easy way to do this or only javascript?

Answer 1

This shouldn’t be too hard to solve, but you’ll need access to .mainwrapper‘s parent.

HTML:

<div class="outer">
    <div class="mainwrapper">
        <div class="leftmargin"></div>
        <div class="rightmargin"></div>
    </div>
</div>

CSS:

.outer {
    overflow-x: hidden;
}
.mainwrapper {
    width:950px;
    margin:0 auto;
    height:800px;
    position:relative;
}
.leftmargin {
    height:100%;
    width:99999px;
    position:absolute;
    left:100%;
}
.rightmargin {
    height:100%;
    width:99999px;
    position:absolute;
    right:100%;
}