Firefox not expanding DIV container horizontally containing image with auto-width

StackOverflow https://stackoverflow.com/questions/16345105

Question

I have a markup with two containers. The first one is set to "position:absolute" with all 4 "coordinates" to expand all over the site (left=right=bottom=top=30px).

Inside that container is another container with its height set to "100%" and "display:inline-block" ("inline-block" because that 2nd container should expand itself horizontally only to the required width).

Inside the 2nd container is an image with its height set to "100%" and its width set to "auto", so that the image is always as tall as the two containers and still has the correct proportion.

I need this 2nd container because I want to place some absolute positioned elements inside this container to always appear on the right side of the image.

The problem is the following: In Firefox this 2nd container does not grow/expand horizontally with the auto-width of the image. It stays at the original width of the image. No Problem in Safari/Chrome, only Firefox.

Here you can find an example-fiddle: http://jsfiddle.net/EGRCQ/ The 1st container is the blue one. Inside this you will find the 2nd container (red) and inside this container an example image. If you reduce the height of the output window below 180px you will see the problem (red container becomes visible) or you just use Firebug to inspect its width.

HTML

<body>
    <div id="container1">
        <div id="container2">
            <img src="http://cdn4.spiegel.de/images/image-491267-thumb-wjvo.jpg"
                 width="180" height="180" />
        </div>
    </div>
</body>

CSS

html, body {
    width: 100%;
    height: 100%;
}
body {
    margin: 0;
    padding: 0;    
}
#container1 {
    background: aqua;
    position: absolute;
    top: 30px;
    left: 30px;
    bottom: 30px;
    right: 30px;
}
#container2 {
    background: red;
    height: 100%;
    display: inline-block;
}

#container2 img {
    height: 100%;
    width: auto;
}

thanks,

daniel

Was it helpful?

Solution

Shrink-wrapping a fluid image

A version of this problem occurs in IE10, Chrome, and Safari as well. It's more obvious if the image is made partially transparent, as in this modified demo. container2 is sized as intended when the page first loads, but if the browser is resized, it keeps its initial width.

Opera behaves the same as Firefox.

It appears that the shrinking-wrapping of container2 (its width being only so large as is needed to fit its content) depends to some extent on having a known width to work with for the child content. For Firefox and Opera, when given width:auto for the child image, it uses the natural width of the image, regardless of the actual scaled width. The other browsers are able to calculate the display width when shrink-wrapping container2, but they only do so when the page first loads; after that, the initially-calculated value continues to be used.

In short, Firefox and Opera never perform the width calculation. And the other browsers only perform it when the page first loads, not when the browser is re-sized.

Workaround

There doesn't appear to be an obvious way to force the browsers to perform a width calculation for the child image; however, if the only reason that container2 is needed is to absolutely position other content on the right side on the image, then there's another way to accomplish this:

Instead of shrink-wrapping a container around the image, place an element alongside it (inline-block or floated), and use that element to place the absolutely positioned content.

In both demos, container2 is a sibling of the image. A small element with text content and a black background is absolutely positioned in container2, to demonstrate placing content to the right of the image. To make things more obvious, container2 was given a width of 10px and the same red background, but it works fine with a width of 0.

OTHER TIPS

Simply remove the width declaration in the <img> tag.

fix is very simple if the width of the container is smaller that the width of the image

.element:after {
    color: transparent;
    content: "a";
}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top