如何定位外部 div 作为 960 网格系统的主容器

Question

我正在为一个站点使用 12 列 960 像素的网格系统。从我从另一个网站截取的屏幕截图中可以看出，我的客户希望接受网站两侧的广告。

问题 1： 我想过让一个外部 div 托管 container_12 div。在这种情况下，我可以通过 css 给它一个背景图像，并将该图像放在一个锚标记中，以便在用户点击它时将其重定向到广告所有者的页面。

这是我的代码：

<div style="width:100%; height:100%; min-height:100%; position:fixed; z-index:999; overflow:auto; background-image:url('img/960.png');"></div>
    <div class="container_12" style="z-index:1;">
        <div class="grid_12 rowAdd bgE">
            <div class="txtA" style="line-height:25px;">ADD ROW</div>
        </div>
    </div>
</div>

产生图1中的结果。container_12没有居中，里面的内容根本无法点击。

问题 2：

我的客户还希望在左右两侧都有相邻的 div 以托管一些其他广告。 div 应为 220 像素宽。他还希望 div 要么是“固定的”，要么是“绝对定位的”。我迷路了，因为我还没有解决第一个问题。非常感谢您的帮助。

图一：

Answer 1

侧边栏

Codepen Demo

基本 HTML

<div class="container">

</div>

<div class="left"></div>
<div class="right"></div>

基本 CSS（宽度一些颜色以供视觉参考）

.container {
  width:960px;
  margin: 0 auto;
  background-color: #c0ffee;
  height:600px;
}

.left, .right {
  position:absolute;
  height:600px;
  width:220px;
  top:0;
}

.left {
  right:50%;
  margin-right:480px;
  background-color: grey;

}

.right {
 left:50%;
 margin-left:480px;
 background-color: red;  
}