CSS позиционирование внутри div

Question

Я использую div с 2 элементами внутри, и я хочу, чтобы мой 1-й элемент был вертикально выровнен сверху, а 2-й элемент - снизу div. Div - это правая часть моей страницы, равная высоте моего основного контента.

#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>

Я хочу, чтобы правильный div был таким: альтернативный текст http://christianruado.comuf.com/element.png

Answer 1

Если вы укажете position: relative для #right, а затем position: absolute для двух внутренних элементов, вы сможете использовать атрибуты top / left / bottom / right для достижения желаемого эффекта.

Answer 2

Попробуйте это.

   #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;

    }

Добавление position:relative; к родителю и position:absolute; с top и bottom скажет вашим пролетам, что они должны быть расположены абсолютно внутри вашего родителя, и заставит их придерживаться верхней и нижней части вашего отд.

Answer 3

Марка #right {position:relative}

Марка #right .top {position:absolute, top:0}

Марка #right .bottom {position:absolute, bottom:0}