Geek asks and answers

Prevent deletion of the div containing the image when adding text

I have a divcentered site and it contains an image. divexpands its heightto fit the image as expected. Then I add the text and I expect it to come out at the bottom div. But in addition to this, it divalso slightly resizes, so it heightmakes up higherthan the heightimages. 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;
}

Result: enter image description here

Undesired effect is marked in red.

I was able to fix this for IE 8 and Firefox by changing 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 running this, I got the correct result in Mozilla:

enter image description here

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

+3
3

, . vertical-align: bottom vertical-align: text-bottom , .

+3

, , : http://jsfiddle.net/WEF49/3/ IE, FF. , img span , div . , div img. div, .

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;
}
+2

: div +

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

= "*" css (ofcource)

+1

More articles:


All Articles