Take the 2-minute tour ×

I've the following part of HTML structure (closing tags omitted for simplicity, indentation represents nested tags):

- <div class="main-content-wrapper">
  - <div class="item-image-wrapper">
    - <img class="item-image fit">
  - <div class="item-text">
    - <h2 id="itemTitle">
    - <p id="itemContent">

with the following CSS

.itemdetailpage section[role=main] article .main-content-wrapper {
    display: -ms-grid;
    -ms-grid-rows: auto auto;
    width: 100%;
    height: 100%;

.itemdetailpage section[role=main] article .item-image-wrapper {
    -ms-grid-row: 1;
    width: 100%;
    height: 100%;

.itemdetailpage section[role=main] article .item-image {
    margin-top: 0px;
    margin-left: 0px;

.itemdetailpage section[role=main] article .item-image.fit {
    /* Fit image to page size */
    max-width: 100%; 
    max-height: 100%;

.itemdetailpage section[role=main] article .item-text {
    -ms-grid-row: 2;
    margin-right: 5px;

The goal is to have the IMG no taller (and no wider) than the main content allows, i.e. to fit the main content space if bigger than that, or to stay at its original size if smaller. The text can just flow below the image, and so can also go below the fold, no problem with that. This should happen with no JS code, CSS only.

When the item text is narrower than the image, it's all ok. The image wrapper is some pixels taller than the image, don't know why, but it looks ok.

The problem I see here is when, at the same time: the image is taller than the available height, and the item text is wider than the image (the item title, in particular). In this case the image wrapper gets taller than its container, and so follows the image. E.g. .main-content-wrapper receives a (correct) height of 900px, but item-image-wrapper is 1024px tall and image is 1024px tall (its natural height).

I know this 100% DIV height has come again and again, and I've looked for answers, but I was not able to find one suitable for this case.


I've found this SitePoint reference, the paragraph where it says "Percentage values refer to the height of ...": does anyone know anything about this rule?

share|improve this question
By your markup, all elements are side by side... –  Zuul Jun 2 '12 at 17:52
I'm sorry, I don't get it. What do you mean? –  superjos Jun 2 '12 at 17:57
All of your elements present in your question are side by side... I assume you are suppose to have them inside one another: <div class="item-image-wrapper"> inside <div class="main-content-wrapper"> or isn't not ? –  Zuul Jun 2 '12 at 17:58
oh, ok, yes, my fault. That's just a copy'n'paste from the live DOM explorer. Of course they are one inside the other, I'll fix that to avoid confusion. –  superjos Jun 2 '12 at 18:00
jsFiddle: jsfiddle.net/t6LvY - this seems to be doing exactly what you want (at least in Chrome), if I'm understanding you correctly. –  Brilliand Jun 3 '12 at 0:19

3 Answers 3

up vote 0 down vote accepted

One thing you can do to achieve this in certain situations is add width: 100% and height: 100% to every intervening element, and rely on the text extending out of its containing block if the image takes up all of the available space. This won't work in every situation because it's then very hard to get anything else on the page to make room for the extending text, but on a vanilla HTML page containing nothing else it works, and it might be possible to make it work in some other situations by putting a floated element at the end of the text content and putting a clearing element in any spot that needs to come after that text content, as in this jsFiddle: http://jsfiddle.net/t6LvY/2/

As the design accumulates complexity this could get nasty fast, however. You're probably better off just going with a bit of JavaScript to set the max-height of the image to the window height on window resize.

share|improve this answer
Thanks for your answer & comments. I was aware of this chain of ancestors all with 100%. I checked your jsFiddles, and I forked to this one where also the root element has percentage size and text is longer. I haven't tried in my actual code, as in the mean time I changed the page design. It seems though to work in Chrome and FF browsers, as it scales with page. It does not seem to work on IE, and I'm on Win 8 Metro, too bad. –  superjos Jun 3 '12 at 14:48
This answer, as I said, did not work for my particular scenario. But it may work for more common scenarios, so I've accepted it as the answer. –  superjos Jun 10 '12 at 10:14

I think you should remove max-height from image class max-width:100% is enough to fit that image to parent container of image. I don't know this will help you or not.

share|improve this answer
Thanks for you answer. If I remove max-height from the image, than any image taller than wider, and taller than the available height, will not be limited to the available space. Which defeats the whole thing. Could you please explain more? –  superjos Jun 2 '12 at 17:59
What i understand from your question is that you want flexible image width & height. So i suggest you to remove max-height of the image & let it be adjusted according to the parent container. Just give width:100% & max-width:100% to that image. Check this link: filamentgroup.com/examples/responsive-images –  SVS Jun 2 '12 at 18:16
I've checked the link. The image is flexible width-wise (i.e. it scales with the browser window width), but it is not flexible height-wise. If I resize browser window height, vertical scrollbar appears. Instead, I'd like to see the image get smaller. Did I make myself clear? –  superjos Jun 2 '12 at 18:23

My own proposed (sad) answer: if I want to keep percentage heights on the DIVs, and stick to pure CSS (i.e. no JS), then the goal cannot be accomplished.

The W3C specs says that the percentage in this case is basically ignored (look for text "The percentage is calculated with..."). And also Internet Explorer docs (the browser I'm working with) says basically the same (look for text "* If the height of the containing block...*").

share|improve this answer

Your Answer


