title: Break out of container div
body: <p>I have the following example: <a href="http://jsfiddle.net/32qRC/" rel="nofollow">http://jsfiddle.net/32qRC/</a></p>
  
  <p>Where I have a <code>960px</code> wide container and two paragraphs that are contained within it.</p>
  
  <p>I also have a div with a class of <code>full</code> that I want to break out of the container and fill the width of the browser window (note that I also have a body margin of 40px all the way around)</p>
  
  <p>I have tried doing it using margin left and right <code>-100%</code> which half works, but makes the div much wider than I wanted it.</p>
  
  <p>In short, if the browser is <code>1280px</code> wide, then full should become <code>1200px</code> wide (because of the 40px either side)</p>
  
  <p>Any ideas?</p>
  
  <p>The HTML:</p>
  
  <pre><code>&lt;div class="container"&gt;
  
      &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.&lt;/p&gt;
  
      &lt;div class="full"&gt;&lt;/div&gt;
  
      &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.&lt;/p&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>The CSS:</p>
  
  <pre><code>*
  {
      margin: 0;
      padding: 0;
  }
  
  body
  {
      margin: 40px;
  }
  .container
  {
      width: 960px;
      margin: 0 auto;
      background: yellow;
  }
  .full
  {
      background: red;
      height: 320px;
      margin: 40px 0;
      margin-left: -100%;
      margin-right: -100%;
  }
  </code></pre>