CSS: 100% height relative to the outer of two surrounding div's?

Question

I have been struggling with this all afternoon, so I thought I'd ask for help...

Basically, I have the following structure:

<div id="gallery">

  <div class="product">
    <img ... />
    <div class="caption">
      <p>some text</p>
    </div>
  </div>

  <div class="product">
    <img ... />
    <div class="caption">
      <p>some text</p>
    </div>
  </div>

</div>

In a nutshell, I would like to achieve the following:

• The outer container (div#gallery) scales with the browser window (height: 100%;).
• The images scale relative to the outer container div#gallery (height: 100%; width: auto;), thus making them responsive.
• The width of each inner container (div.product) tightly encloses the image contained within.
• 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).

First try: I could simply write the following CSS:

div#gallery {position: relative; height: 100%; ...}
img         {height: 100%; width: auto;}
div.caption {position: absolute; width: 100%; ...}

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...

div#gallery {position: relative; height: 100%; ...}
div.product {position: relative;}
img         {height: 100%; width: auto;}
div.caption {position: absolute; width: 100%; ...}

Hmm, div.caption works now, but the height of img is now relative to div.product, which doesn't scale. So, let's add...

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%; ...}

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!

And this is where I'm stuck. Any ideas?

Thank you very much in advance!

EDIT: Following two suggestions there's now a jsFiddle illustrating the situation: http://jsfiddle.net/marccee/vx5DC/2/

Solution

I am trying to follow your post, but there is a lot of info in there!

See if this is on the right track: http://jsfiddle.net/derekstory/vx5DC/1/

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
}
#gallery {
    height: 100%;
    width: 100%;
}
.product {
    background: #333;
    height: 100%;
    width: 100%;
}
.image {
    position: absolute;
    background: #777;
    height: 100%;
    width: 100%;
}
.caption {
    background: rgba(111, 444, 333, .1);
    width: 100%;
    height: 100%;
    position: absolute;
}

Comments

[Marcus C.]

Thanks for setting this up. I don't have too much experience with jsFiddle, so I simply edited your code to better reflect my situation... hope that works: jsfiddle.net/marccee/vx5DC/2 The problem can be seen when resizing the browser window: The images scale as they should, but the surrounding div.product don't follow. Instead they seem to remain fixed at the original (!) width of the image.

[Derek Story]

See if this is more on track for what you need: jsfiddle.net/derekstory/vx5DC/4

[Marcus C.]

Hmm, this basically works, but not the way I need it to. I need the height of the images to stretch to fill the available space. The width should adapt accordingly. In your case the width scales and the height adapts...

[Marcus C.]

Thanks for your help. I noticed, you replaced .product by .contain... Could you explain briefly what you're trying to do? I am not sure, in which browser you are working... I am viewing this in Firefox and the images are HUGE now. Actually, I would like the height of the images to be 100% of #gallery.

[Derek Story]

Wow! Those ARE big in FF. I didn't check FF. Chrome looks good..Yikes. I think i just accidentally deleted the .product tag and replaced it with my own because I couldn't remember the name. Same thing.

[Derek Story]

jsfiddle.net/vx5DC/7 Silly mistake on my part. Add height: 100% to #gallery and that should fix it. Evidentally Chrome just assumed the height and firefox did not. Should look correct now.

[Marcus C.]

Yeah, thanks a lot. That looks exactly like what I was looking for. Actually, I had given up hope already... thought I'd need a script. Now, that I have checked your solution, it seems to me, the main problem was the "display: inline-block;" in div.product. Any idea, why this is problematic? (Would like to upvote your solution, but my rep is not sufficient. Will catch up on this as soon as possible.)

[Derek Story]

Not 100% sure, but I think it was treating it as a block element in which it thought that space was its dedicated space. Inline (or span in my case) aloud for the flexibility.