title: Stretching an element outside of its parent
body: <p>I have 3 divs in my body: a container, a parent, and a child.<br>
  I'm trying to get the child to extend outside of its parent on the left side.<br>
  But if I do so with <code>position: absolute</code>, the parent will not stretch to the desired height...</p>
  
  <p><code>position: static</code></p>
  
  <p><img src="https://i.stack.imgur.com/rkPMM.png" alt="position: static"></p>
  
  <p><code>position: absolute</code></p>
  
  <p><img src="https://i.stack.imgur.com/Agjth.png" alt="position: absolute"></p>
  
  <p>Using a <code>margin-left: -20px</code> will not do either: ultimately, i'll have other nested parents, and need <em>all</em> the children to extend to the outer left.</p>
  
  <p>Hers's my code so far:</p>
  
  <pre><code>#container {
      position: absolute;
      width: 300px;
  }
  
  .parent {
      margin-left: 20px;
  }
  
  .child {
      padding: 30px;
  }
  </code></pre>
  
  <p>Any way to do this in pure css?</p>
  
  <p><strong>Edit:</strong>  Here's my html code so you can see how the parents will be nested in each other:</p>
  
  <pre><code>&lt;div id="container"&gt;
  
      &lt;div class="parent"&gt;
          &lt;div class="child"&gt;&lt;/div&gt;
  
          &lt;div class="parent"&gt;
              &lt;div class="child"&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="parent"&gt;
          &lt;div class="child"&gt;&lt;/div&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Edit 2:</strong> I have to point out there are multiple (infinite) levels of nesting in my code. The html sample above is just a fragment.</p>