CODEWITHSUNDEEP
css
christian
christian

Reputation: 153

CSS positioning inside div

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

Upvotes: 5

Views: 8877

Answers (3)

Kyle
Kyle

Reputation: 67184

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.

Upvotes: 1

Matt Sach
Matt Sach

Reputation: 1170

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.

Upvotes: 7

Fermin
Fermin

Reputation: 36071

Make #right {position:relative}

Make #right .top {position:absolute, top:0}

Make #right .bottom {position:absolute, bottom:0}

Upvotes: 1

Related Questions