Meilleure façon de créer une colonne centrale de 100% de largeur avec css

Question

J'ai une disposition css assez standard où j'utilise un conteneur div qui est 980px de large pour tout contenir. Le seul problème est que je veux avoir une bannière de 1900px large à mi-chemin de la page qui est centrée au milieu et est à 100% de la largeur de la page. Y at-il un moyen de le faire sans se débarrasser de la div conteneur?

donc je suis désireux

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

    < 980px > container 
< 100% page width > 

Quelqu'un sait comment obtenir cette bannière 1900px centrée au milieu sans supprimer mon conteneur div?

MERCI !!

Answer 1

Je ne l'ai pas 1900px pour l'amour de la démo, mais je suis sûr que vous aurez l'idée :)

Demo

notes Cliff:

HTML: supprimer containerWrapper si vous voulez la bannière visible tout (faire des barres de défilement)

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