CSS positioning inside div

Posted by christian on Stack Overflow See other posts from Stack Overflow or by christian
Published on 2010-04-14T08:39:47Z Indexed on 2010/04/14 8:43 UTC
Read the original article Hit count: 555

Filed under:

I am using a div with 2 elements inside and I want to position my 1st element to be vertically aligned top and 2nd element to the bottom of the div. The div is the right portion of my page and equal to the height of my main content.

#right {
    float:right;
    width: 19%;
    background:#FF3300;
    margin-left:2px;
    padding-bottom: 100%;
    margin-bottom: -100%;
}
#right .top {
    display:block;
    background-color:#CCCCCC;
}
#right .bottom {    
    bottom:0px;
    display:block;
    background-color:#FFCCFF;
    height:60px;
}

HTML:

<div id="right">
    <span class="top">Top element</span>
    <span class="bottom"><img src="images/logo_footer1.gif" width="57" height="57" align="left" class="img">&nbsp;<img src="images/logo_footer2.gif" width="57" height="57" align="right" class="img"></span>
</div>

I want the right div to be like this: alt text

© Stack Overflow or respective owner

Related posts about css