Prevent div containing image to resize when text added

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="../.开发者_如何学Go./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 ?

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.

I think this is what you want: http://jsfiddle.net/WEF49/3/ Tested in IE, chrome and FF. This way img and span are bottom aligned and div do not have any extra space. Bad side is that div height is fixed to img height. If you do not mind fixed height on div this is cleanest solution.

html:

<div class="siteContent">
    <img class="debug" src="http://t0.gstatic.com/images?q=tbn:ANd9GcRzjvZihxljFMlEt_IOypeOWYCgPgEvVrZ_DnwVTws5uR_iC_oFIg" /> 
    <span>
        aaa
    </span>
</div>

css:

.siteContent
{   
    width: 960px;
    height: 213px;
    margin-left: auto;
    margin-right: auto;
    border: thin solid;
    overflow:hidden;
}
.debug
{
    border: thin solid;
}

Try adding overflow:hidden to the div without height +

<span style="clear:both">
        aaa
    </span>
+
<img src="..." style="clear:both" />

take the style="*" to your css file (ofcource )