My website has a div that is centered and contains a picture. The div adjusts its height to fit the picture, but when I add text, the div unexpectedly resizes so that its height is taller than the picture itself. Here is an example:
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 issue is highlighted in red.
I was able to resolve this in IE 8 and Firefox by adjusting the CSS as follows:
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 making these changes, the layout was correct in Mozilla:
However, this solution did not work for Chrome and Safari. How can I make it work across all major browsers?