title: Is there a way to make a child DIV's width wider than the parent DIV using CSS?
body: <p>Is there a way to have a child DIV within a parent container DIV that is wider than its parent. The child DIV needs to be the same width as the browser viewport.</p>
  <p>See example below:
  <img src="https://i.stack.imgur.com/MRgm9.gif" alt="enter image description here" /></p>
  <p>The child DIV <strong>must</strong> stay as a child of the parent div. I know I can set arbitrary negative margins on the child div to make it wider but I can't work out how to essentially make it 100% width of the browser.</p>
  <p>I know I can do this:</p>
  <pre><code>.child-div{
      margin-left: -100px;
      margin-right: -100px;
  }
  </code></pre>
  <p>But I need the child to be the same width as the browser which is dynamic.</p>
  <h2>Update</h2>
  <p>Thanks for your answers, it seems the closest answer so far is to make the child DIV <code>position: absolute</code>, and set the left and right properties to 0.</p>
  <p>The next problem I have is that the parent has <code>position: relative</code>, which means that left and right properties are still relative to the parent div and not the browser, see example here: <a href="http://jsfiddle.net/v2Tja/2" rel="noreferrer">jsfiddle.net/v2Tja/2</a></p>
  <p>I can't remove the <code>position: relative</code> from the parent without screwing everything else up.</p>