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

Question

我正在为一个站点使用12列960 px网格系统。我的客户希望接受网站双方的广告，从我从其他网站截取的屏幕截图中可以看出。

问题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可以“固定”或“绝对定位”。我迷路了，因为我还没有解决第一个问题。我很感激你的帮助。

图1：

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