用 CSS 创建 100% 宽度中间列的最佳方法

Question

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

所以我想要

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

     < 980px    > container
 < 100% page width  >

有谁知道如何在不删除我的容器 div 的情况下让 1900 像素横幅居中居中？

谢谢！！

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