2 개의 열을 포함하는 전체 너비 DIV의 배경색 구분

Question

트위터 부트 스트랩을 사용하고 있는데 주 컨테이너 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/