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

i have markup 2 containers. first 1 set "position:absolute" 4 "coordinates" expand on site (left=right=bottom=top=30px).

inside container container height set "100%" , "display:inline-block" ("inline-block" because 2nd container should expand horizontally required width).

inside 2nd container image height set "100%" , width set "auto", image tall 2 containers , still has correct proportion.

i need 2nd container because want place absolute positioned elements inside container appear on right side of image.

the problem following: in firefox 2nd container not grow/expand horizontally auto-width of image. stays @ original width of image. no problem in safari/chrome, firefox.

here can find example-fiddle: http://jsfiddle.net/egrcq/ 1st container blue one. inside find 2nd container (red) , inside container example image. if reduce height of output window below 180px see problem (red container becomes visible) or use firebug inspect 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

shrink-wrapping fluid image

a version of problem occurs in ie10, chrome, , safari well. it's more obvious if image made partially transparent, in modified demo. container2 sized intended when page first loads, if browser resized, keeps initial width.

opera behaves same firefox.

it appears shrinking-wrapping of container2 (its width being large needed fit content) depends extent on having known width work child content. firefox , opera, when given width:auto child image, uses natural width of image, regardless of actual scaled width. other browsers able calculate display width when shrink-wrapping container2, when page first loads; after that, initially-calculated value continues used.

in short, firefox , opera never perform width calculation. , other browsers perform when page first loads, not when browser re-sized.

workaround

there doesn't appear obvious way force browsers perform width calculation child image; however, if reason container2 needed absolutely position other content on right side on image, there's way accomplish this:

instead of shrink-wrapping container around image, place element alongside (inline-block or floated), , use element place absolutely positioned content.

in both demos, container2 sibling of image. small element text content , black background absolutely positioned in container2, demonstrate placing content right of image. make things more obvious, container2 given width of 10px , same red background, works fine width of 0.

Search This Blog

Brande