1

I'm using the twitter bootstrap and I am having a hard time figuring out how to separate the background color of two columns that are inside of a main container div, yet have it go full-width.

Here is a fiddle of what I have so far: http://jsfiddle.net/seeplanet/ZTbwz/

My main problem is that I want to have the two columns centered on the page and not extending to either side. That is why I have the max-width set on the container.

My 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>

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

And this is what I would like it to look like:

enter image description here

1 Answer 1

1

Add display:table; to your container like this:

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

JS Fiddle http://jsfiddle.net/grrenier/3TE4X/1/

Try this other JS Fiddle:

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

7
  • Unfortunately that didn't seem to make any difference when I added it. It worked for you?
    – Dan
    Apr 29, 2014 at 18:12
  • Yes it worked for me, in your fiddle. If you want to center the content the best way is using display:table and margin:0 auto;
    – Ragnar
    Apr 29, 2014 at 18:14
  • I've already centered the content. I want that yellow background to extend all the way to the edge of the browser while at the same time keeping the content centered.
    – Dan
    Apr 29, 2014 at 18:16
  • I think that you can set the height or min-height of col-sm-9 element to extend it to the edge of the browser.
    – Ragnar
    Apr 29, 2014 at 18:23
  • Sorry, but I need it to extend to the LEFT side.
    – Dan
    Apr 29, 2014 at 18:31

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.