Question

I have a div centered in the site and containing a picture. The div extends its height to fit the picture as expected. Then I add some text and I expect it to lay out on the bottom of the div. But in addition to that the div also resizes a little bit so its height is higher than the height of the picture. Here is the exmaple:

Html:

<div class="siteContent">
    <img class="debug" src="../../Content/themes/base/images/pageTitle.png" /> 
    <span>
        aaa
    </span>
</div>

CSS:

body
{
    margin: 0;
}
.siteContent
{   
    width: 960px;
    margin-left: auto;
    margin-right: auto;
    border: thin solid;
}
.debug
{
    border: thin solid;
}

The result:

The unwanted effect is marked red.

I was able to fix this for IE 8 and Firefox by modifiing the CSS like this:

body
{
    margin: 0;
}
.siteContent
{   
    width: 960px;
    margin-left: auto;
    margin-right: auto;
    border: thin solid;
    position: relative;
}
.siteContent span{
    position: absolute;
    bottom: 0px;
}
.debug
{
    border: thin solid;
}

After runnig this I got the right result in Mozilla:

However this does not work for Chrome and Safary. How can make it work for all major browsers ?

Answer 1

this happens because the image is aligned to the baseline of the text. try to set vertical-align: bottom or vertical-align: text-bottom for your image to solve this.