包含两列的全宽DIV的单独背景颜色

Question

我正在使用twitter bootstrap，我很难弄清楚如何分离主容器div内部的两列的背景颜色，但是它是全宽的。

这是我到目前为止的一个小提琴：http://jsfiddle.net/seeplanet/ZTbwz/

我的主要问题是我想让两列以页面为中心而不是向两侧延伸。这就是我在容器上设置最大宽度的原因。

我的HTML：

<div id="featured-content">
    <div class="container">
        <div class="row">
            <div class="col-sm-9">                          
            Featured Video or Image Gallery     
            </div>

            <div class="col-sm-3">  
             Other Information              
        </div>
        </div>
    </div>
</div>

我的CSS：

#featured-content {
background-color: #c7591f;
padding: 20px 0px;
}

.container {
max-width: 960px;
margin:0 auto;
}

.col-sm-9{
 width:75%;   
 float:left;
 background:yellow;
}

.col-sm-3{
 width:25%;
 float:left;
}
}

这就是我希望它的样子：

Answer 1

将display:table;添加到您的容器中，如下所示：

.container {
    max-width: 360px;   /* If I remove this, then it works, but then my content is not centered */
    margin:0 auto;
    display:table;
}

JS小提琴 http://jsfiddle.net/grrenier/3TE4X/1/

试试另一个JS小提琴：

http://jsfiddle.net/grrenier/3TE4X/2/