Parent width of a div is greater than the width of children in Firefox

Question

I have a strange problem in Firefox.

I have a div with a height defined in a constant px value, and inside it there is an img element. I have no problem with this installation in chrome, but in the parent div the firefox file is bigger than img.

This is the html structure:

<div class="wrapper"> <div class="imageHolder"> <img src='dasource'> </div> </div> 

And this is css:

 .wrapper { width: 900px; } .imageHolder { height: 400px; width: auto; background-color: green; float: left; max-width: 50%; overflow: hidden; } .imageHolder img { height: 100%; } 

http://jsfiddle.net/MXudn/6

As explained in this script, in firefox the parent div is larger than the image in it.

Any ideas why this is so?

Answer 1

It looks like a bug in Firefox for me. For some reason, overflow: hidden causes the parent div use the width of the unscaled image rather than post-scaling.

http://jsfiddle.net/MXudn/8

 <div class="imageHolder"> <img src='http://placehold.it/650x650' /> <div> 

 .imageHolder { height: 400px; background-color: green; float: left; overflow: hidden; } .imageHolder img { height: 100%; } 

In the example below, you can clearly see the problem. The image is initially 650px wide, scalable in height, it becomes 400px wide. However, the parent element remains 650px wide.

If you don't need overflow: hidden just uninstall that fixes the problem.

http://jsfiddle.net/MXudn/12/

EDIT: Firefox bugzilla ticket for this issue.