You can see the extra height from using percentage for the width here (in firefox):

http://jsfiddle.net/080xzqub/

And if you instead set a pixel width, it has no extra height:

http://jsfiddle.net/080xzqub/1/

Why does this occur? How do I fix this?

EDIT: This occurs in Firefox

HTML:

<div class="a"></div> <div class="b"> <img src="http://flamesnation.ca/uploads/Image/BlackBox.jpg" /> </div>

CSS with percentage:

body { display: -webkit-box; display: -moz-box; display: box; -webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient: vertical; } .a { position: relative; height: 100px; padding-left: 1em; padding-right: 1em; -webkit-box-ordinal-group: 1; -moz-box-ordinal-group: 1; box-ordinal-group: 1; background-color: red; } .b { position: relative; height: 200px; padding-left: 1em; padding-right: 1em; -webkit-box-ordinal-group: 2; -moz-box-ordinal-group: 2; box-ordinal-group: 2; background-color: yellow; } img { position: relative; width: 60%; }

CSS with pixel width: