Question

Check this code :

HTML :

<div style="position: absolute; visibility: visible; width: 172px;">
    <img class="inf-image" align="right" src="http://www.ilritaglio.it/wp-content/uploads/2012/02/wee.jpg">
    
    <div class="inf-content">
        Hello        
    </div>   
</div>

CSS :

.inf-image
{
    position: relative;
    cursor: pointer;
    margin: 3px 8px 0px 0px;  
    width:20px;   
}

.inf-content {
    background-color: #FF0000;
    padding: 10px;
    width: 150px;
    height:50px;
}

looks like the div (which is relative) is under the image (which look absolute). Why? It should push the div over its height.

Answer 1

Floating elements (like an <img align="right">) offset only the content of block elements, but not their backgrounds, so the red background of the div is seen under the image.