title: 100% width of grand parent without position absolute
body: <p>In the following html/css code:</p>
  
  <pre><code>&lt;div class="blue"&gt;
      &lt;div class="red"&gt;
          &lt;div class="yellow"&gt;
              1
          &lt;/div&gt;
          &lt;div class="yellow"&gt;
              2
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  .blue   { background-color: blue;   height: 150px; width: 100px; margin: 100px; }
  .red    { background-color: red;    height: 100px; width: 500px; margin-left: -50px; }
  .yellow { background-color: yellow; height: 50px;  }
  </code></pre>
  
  <p>I need to give <code>.yellow</code> the same width as <code>.blue</code>, but without using fixed px (as <code>.blue</code> is responsive and can change it's width) and without using <code>position: absolute;</code> as the two yellow must not overlap.</p>
  
  <p>Expected result: <a href="http://jsfiddle.net/kPg97/3/" rel="nofollow">http://jsfiddle.net/kPg97/3/</a></p>
  
  <p><br>
  This doesn't work as it uses fixed px:</p>
  
  <pre><code>.yellow { width: 100px; float: left; }
  </code></pre>
  
  <p><br>
  This doesn't work as the first <code>.yellow</code> isn't visible:</p>
  
  <pre><code>.yellow { position: absolute; width: 100%; left: 0px; }
  </code></pre>