title: stretch the background of an div to full width inside container
body: <p>I'm working on a website and using a 960 container in the middle, now the only problem is the designer is using different background colors on some <code>div</code>s.</p>
  
  <p>So my code for now is:</p>
  
  <pre><code>      &lt;div id="content"&gt;
  &lt;!-- the content needs to 960 on the width only the background need the full width of the page --&gt;
               &lt;div class="whitebackground"&gt;
                       &lt;!-- content --&gt;
               &lt;/div&gt;
  
               &lt;div class="bluebackground"&gt;
                       &lt;!-- content --&gt;
               &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>css: </p>
  
  <pre><code>#content {
  
  margin: 0px auto;
  min-height: 700px;
  position: relative;
  width: 960px;
  
  }
  .whitebackground{
      width: 100%;
      background:#FFF;
  }
  .bluebackground{
      width: 100%;
      background:#0054fe;
  }
  </code></pre>
  
  <p>Now the problem is the background color of the <code>div</code>s is of course only inside the content <code>div</code>. Is there some way to get the color of the <code>div</code>s going outside of the content <code>div</code> and going full width of the page? </p>
  
  <p>Here is the working code <a href="http://jsfiddle.net/6cJVV/" rel="nofollow">http://jsfiddle.net/6cJVV/</a></p>