Question

Typically with my web-pages I’ll have a #wrapper DIV that wraps the entire page and set to something like:

#wrap {position: relative; width: 1000px; display: block; margin: auto;}

My question is, if, inside that I have a banner like so:

#banner {width: 100%; display: block; height: 100px; background :#CCC;}

I then want that banner to go outside the margins of #wrapper and reach the sides of the window, no matter how big the window is.

How can I achieve this?

Here is a JS fiddle of what I can piece together: http://jsfiddle.net/MCms6/

Answer 1

To solve all your issues:

1. Make a container element for your #banner, so it can follow the flow of your document. Also position it relative to make it the parent to your banner.

2. Position #banner absolutely and you can stretch it as wide as you want.

---

UPDATE – DEMO

HTML

<div id="wrapper">
    <h1>my content my content my content my content my content my content my content my content </h1>

    <div id="bannerHolder">
        <div class="banner">
            my Banner
        </div>
    </div>

     <h1>more content more content more content more content more content more content more content</h1>
</div>

CSS

#wrapper {
    width: 140px;
    display: block;
    margin: auto;
    background: #ccc;        
}

#bannerHolder {
    background: #aaa;
    display: block;
    height: 100px;
}

#bannerHolder .banner {
    border: 1px solid #f00;
    position: absolute;
    background: #555;
    left: 0;
    right: 0;
    height: 100px;   
}