包含兩列的全寬DIV的單獨背景顏色

Question

我使用的是twitter引導程序，而且我很難弄清楚如何分隔主容器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/