Best way to create 100% width middle column with css

Question

Hey everyone,

I have a pretty standard css layout where I use a container div that is 980px wide to hold everything. The only problem is that I want to have a 1900px wide banner half way down the page that is centered in the middle and is 100% width of the page. Is there any way to do this without getting rid of the container div?

so I am wanting

 ____________________
 |   |           |   | 
 |   |           |   | 
 |   |           |   | 
 |___|           |___|
 |                   |
 |                   |
 |___             ___|
 |   |           |   |
 |   |           |   |
 |   |           |   |
 |   |           |   |
 |___|___________|___|

     < 980px    > container
 < 100% page width  >

Anyone know how to get that 1900px banner centered in the middle without deleting my container div?

THANKS!!

Answer 1

I didn't do 1900px for the sake of the demo, but i'm sure you'll get the idea :)

Demo

Cliff notes:

HTML: remove containerWrapper if you want the whole banner visible (make scroll bars)

<div id="containerWrapper">
    <div id="container">

        <p>content</p>

       <div id="banner">        
              someday i'll grow  up to be 1900 px wide!      
       </div>

        <p>content</p>

    </div>​
</div>

CSS:

#containerWrapper {
    width:100%;
    overflow:hidden;
}

#container {
    width:300px;
    margin-left:auto;
    margin-right:auto;
}

#banner {
    margin-left:-200px; /* (this width - #container) / 2 */
    width:700px;
}