Extending div element width before Bootstrap container class

Question

The Bootstrap container class has a width of 1170 pixels, which is great for displaying information, but I want the footer background to expand to the edges of the page, regardless of screen size. I have seen solutions suggesting setting a width of 2000 pixels, but I would prefer a cleaner solution if someone uses a monitor with a large screen width. I also do not want to override the width of the Bootstrap container class, because this will interfere with the positioning of my elements.

Is there a way in CSS to specify a background to spill it past a div?

Here is the JSFiddle

Here is my current .footer class, which is bound by the Bootstrap .container class:

 .footer { float: left; background: #000; margin-top:40px; width: 100% !important; height: 500px; position: absolute; } 

Answer 1

Change your design a bit

  <!-- .footer old home --> </container> <footer> <container>Your previous footer kids</container> </footer> </body> 

.container is a class, so it can have multiple occurrences.

Actually, I would argue why Bootstrap created the .container class, and NOT the identifier in the first place.

Violin: http://jsfiddle.net/V7Yyf/

BTW - .container has a width of 'auto' for specific viewport sizes (see: line # 825 from bootstrap-responsive.css)

Answer 2

Try the following:

 .footer { float: left; background: #000; margin-top:40px; width: 100% !important; height: 500px; margin-left: -83px; position: absolute; } 

The !important option basically takes precedence over any other property that may be overwritten.

Also edit the container class in bootstrap.css

 .container { margin-right: auto; margin-left: auto; *zoom: 1; display: block; width: 100% !important; position:absolute; }