title: Overlaying one div over another, but not knowing the size of the div
body: <p>I'm trying to lay one div over another. This is really simple if you know the dimensions of the div.</p>
  
  <p>Solved here:
  <a href="https://stackoverflow.com/questions/2941189/how-to-overlay-one-div-over-another-div">How to overlay one div over another div</a></p>
  
  <p>So, here is my HTML:</p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;div class="overlay"&gt;&lt;/div&gt;
    &lt;div class="content"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>In my case, I don't know the exact dimensions of the "content" or "container" div. This is because I don't have control over any of the content in the div (we are making our app extensible for 3rd party developers).</p>
  
  <p><a href="http://jsfiddle.net/andyuk/YWfTM/10/" rel="nofollow noreferrer">See my example on jsFiddle</a>
  The overlay should cover the content entirely. Width 100% and Height 100%. However, this does not work because in my example I positioned the overlay absolutely.</p>
  
  <p>One solution is to use JavaScript to get the size of the content div and then set the size of the overlay. I don't like this solution much since if image sizes are not specified, you need to wait until images are loaded and recalculate the size of the div.</p>
  
  <p>Is there any way of solving this problem in CSS?&nbsp;</p>