使用css创建100％宽度中间列的最佳方法

Question

我有一个非常标准的CSS布局，我使用宽度为980px的容器div来容纳所有东西。唯一的问题是我希望在页面中间有一个1900像素宽的横幅，中间位于中间，并且页面宽度为100％。有没有办法在不摆脱容器div的情况下做到这一点？

所以我想要

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

     < 980px    > container
 < 100% page width  >

任何人都知道如何在不删除容器div的情况下将1900px横幅放在中间位置？

谢谢！

Answer 1

为了演示，我没有做1900px，但我相信你会明白这个想法：）

Demo

悬崖说明：

<强> HTML ： 如果您希望整个横幅可见（滚动条）

，请删除containerWrapper

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