css banner that stretches from left to right - css

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:
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.
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;
}