title: How can I adjust the width of a nested div to equal the width of an ancestor div?
body: <p>My pages are structured as nested divs. They have padding and margin so inner divs are typically physically smaller than outer divs. However, in some cases I would like one of the inner divs (red box in the image below) to expand widthwise to match the left and right edges of the outermost div.</p>
  <p><a href="https://i.stack.imgur.com/pw4Ko.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/pw4Ko.png" alt="nested divs" /></a></p>
  <pre><code>&lt;div id=&quot;div-a&quot;&gt;
    &lt;div id=&quot;div-b&quot;&gt;
      &lt;div id=&quot;div-c&quot;&gt;
        &lt;div id=&quot;div-d&quot;&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>This is just an example -- the number of nested divs can vary. The width of the outermost div is variable. The heights of all the divs are also variable.</p>
  <p>I have tried using absolute positioning, but this removes div-d from the document flow. Since I don't know the height of its content, I can't compensate. Any other suggestions? Thank you for any help.</p>
  <pre><code>#div-a {
    position:relative;
  }
  #div-d {
    position:absolute;
    left:0;
    right:0;
  }
  </code></pre>