bootstrap 2 background-colors in 1 row - css

Question

I hope this question makes sense. I'm stummped at what to do. I am currently developing a site where a section of the page will have two seperate background colors (1 for the left and 1 for the right). This is what I am trying to go for:
<div class="gray-bg">
<div class="span6">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad, consequuntur illo impedit libero nam voluptatem sed facere earum quam ullam velit iste necessitatibus aperiam dolor id. Quod rerum est vel.</p>
</div>
</div>
<div class="white-bg">
<div class="span6">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci quam sapiente ut iusto neque. Obcaecati, molestiae, consequuntur qui blanditiis libero odio fuga eum iusto illo eaque inventore ipsa eligendi ipsam!</p>
</div>
</div>
I've tried several varations of this, putting rows under the span, putting containers and subrows in the span, but I'm not able to create the affect I want. Can anyone please help out? Thanks!
Update: Heres a JSFiddle of what I am trying to do. It works, but its not in a container to space out the row correctly. When I put it in the container, The blue on the left does not extend all the way.
http://jsfiddle.net/BVmUL/622/

Answer 1

try the following: Bootply demo
<div class="container">
<div class="row">
<div class="span6">
<div class="gray-bg">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad, consequuntur illo impedit libero nam voluptatem sed facere earum quam ullam velit iste necessitatibus aperiam dolor id. Quod rerum est vel.</p>
</div>
</div>
<div class="span6">
<div class="white-bg">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci quam sapiente ut iusto neque. Obcaecati, molestiae, consequuntur qui blanditiis libero odio fuga eum iusto illo eaque inventore ipsa eligendi ipsam!</p>
</div>
</div>
</div>
</div>
css:
.gray-bg {
background-color:red;
}
.white-bg {
background-color:green;
}