title: CSS: 100% height relative to the outer of two surrounding div's?
body: <p>I have been struggling with this all afternoon, so I thought I'd ask for help...</p>
  
  <p>Basically, I have the following structure:</p>
  
  <pre><code>&lt;div id="gallery"&gt;
  
    &lt;div class="product"&gt;
      &lt;img ... /&gt;
      &lt;div class="caption"&gt;
        &lt;p&gt;some text&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="product"&gt;
      &lt;img ... /&gt;
      &lt;div class="caption"&gt;
        &lt;p&gt;some text&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>In a nutshell, I would like to achieve the following:</p>
  
  <ul>
  <li>The outer container (div#gallery) scales with the browser window (height: 100%;).</li>
  <li>The images scale relative to the outer container div#gallery (height: 100%; width: auto;), thus making them responsive.</li>
  <li>The width of each inner container (div.product) tightly encloses the image contained within.</li>
  <li>The captions (div.caption) are positioned "absolute" in relation to div.product (they are overlayed with a transparent background, but that's beside the point).</li>
  </ul>
  
  <p>First try: I could simply write the following CSS:</p>
  
  <pre><code>div#gallery {position: relative; height: 100%; ...}
  img         {height: 100%; width: auto;}
  div.caption {position: absolute; width: 100%; ...}
  </code></pre>
  
  <p>That way, div.product would be "static" and the image would be positioned relative to div#gallery. Unfortunately, I need div.product to be "relative" for div.caption to work. So...</p>
  
  <pre><code>div#gallery {position: relative; height: 100%; ...}
  div.product {position: relative;}
  img         {height: 100%; width: auto;}
  div.caption {position: absolute; width: 100%; ...}
  </code></pre>
  
  <p>Hmm, div.caption works now, but the height of img is now relative to div.product, which doesn't scale. So, let's add...</p>
  
  <pre><code>div#gallery {position: relative; height: 100%; ...}
  div.product {position: relative; height: 100%; width: auto;}
  img         {height: 100%; width: auto;}
  div.caption {position: absolute; width: 100%; ...}
  </code></pre>
  
  <p>Now, this should really work, shouldn't it!? Well, almost. There's still one weirdness: When resizing the browser, the height of div.product scales, as it should, but the width remains fixed at the original width of the image contained within!</p>
  
  <p>And this is where I'm stuck. Any ideas?</p>
  
  <p>Thank you very much in advance!</p>
  
  <p>EDIT: Following two suggestions there's now a <strong>jsFiddle</strong> illustrating the situation: <a href="http://jsfiddle.net/marccee/vx5DC/2/" rel="nofollow">http://jsfiddle.net/marccee/vx5DC/2/</a></p>