title: How can I expand a child div to 100% screen width if the container div is smaller?
body: <p>The parent element of the whole page is a centered div limited to a max-width of 960px. All other elements on the page are children of that parent div. The simplified structure is the following:</p>
  <pre><code>&lt;div id=&quot;parent&quot;&gt;
    &lt;div id=&quot;something&quot;&gt;&lt;/div&gt;
    &lt;div id=&quot;wide-div&quot;&gt;&lt;/div&gt;
    &lt;div id=&quot;something-else&quot;&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>While the parent div shouldn't expand beyond a width of 960px, the div I called &quot;wide-div&quot; here should fill the entire width of the screen. It contains a single image that is wider than the 960px, and it should set a different background color for the entire width of the screen.</p>
  <p>I can't easily take that div out of the parent div, it would mess up other parts of my layout and it would make the whole thing rather awkward.</p>
  <p>I found a few tricks on how you can achieve this, but none seemed to fit my requirements. My design is responsive, or at least I'm trying to achieve that. The tricks I found relied on knowing the size of the involved elements, which is not fixed in my case.</p>
  <p>Is there a way to expand the inner div to the full screen width in a responsive layout?</p>