title: 100% Browser Width Div Inside Smaller Div
body: <p>I have a div of <code>width: 1000px</code> and inside that is a child which I wish to span the entire width of the browser window.</p>
  
  <p>The trouble is, I don't know how to override previous width inheritance.</p>
  
  <p>I could just position this outside of my container div, but that would be a huge inconvenience and workaround, unless of course this is equally as troublesome.</p>
  
  <p><strong>Markup:</strong></p>
  
  <pre><code>&lt;div class="centreContainer"&gt;
  
      &lt;div class="menuContainer"&gt;&lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>html, body
  {
      margin: 0;
      padding: 0;
  }
  
  .centreContainer
  {
      margin: auto;
      width: 1000px;
  }
  
  .menuContainer
  {
      width: &lt;what to do&gt;;
      height: 420px;
  }
  </code></pre>
  
  <p>Preferably I would like a CSS only workaround, I was thinking of some stupid Javascript solution where you get the width of the browser window, then set the width of the menuContainer to:</p>
  
  <p><code>&lt;variable&gt; / 10</code> <em>(10 because 1000 / 100 = 10, where 1000 is the width of the centre container)</em> </p>
  
  <p>And have the menuContainer set on <code>margin: auto;</code> so it is centered.</p>