CSS positioning inside div

Question

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 http://christianruado.comuf.com/element.png

Answer 1

If you specify position: relative for #right, and then position: absolute for the two internal elements, you should be able to use top/left/bottom/right attributes to achieve the effect you want.

Answer 2

Try this.

   #right {
         position:relative; <-- add this
        float:right;
        width: 19%;
        background:#FF3300;
        margin-left:2px;
        padding-bottom: 100%;
        margin-bottom: -100%;

    }

}
#right .top {
     position:absolute; <-- add this
     top: 0px; <-- and this
    display:block;
    background-color:#CCCCCC;
}

    #right .bottom {   
          position:absolute: <-- add this.
        bottom:0px;
        display:block;
        background-color:#FFCCFF;
        height:60px;

    }

Adding position:relative; to the parent and position:absolute; with top and bottom will tell your spans that they're meant to be positioned absolutely within your parent and force them to stick to the top and bottom of your div.