Внутренний DIV заблокирован в нижнем правом углу внешнего DIV

Учитывая следующий HTML

<div style="width: 500px; height: 500px; border: 1px solid red;">
    <div style="width: 200px; height: 100px; border: 1px solid green; float: right; vertical-align: bottom;">
    </div>
</div>

Я хотел бы, чтобы внутренний div блокировался в нижнем правом углу внешнего div. Что мне нужно сделать CSS мудро, чтобы это произошло?

Спасибо! Джон

Ответы

Ответ 1

position - ваш друг

<div style="width: 500px; height: 500px; border: 1px solid red; position: relative">
    <div style="position: absolute; right: 0; bottom: 0; width: 200px; height: 100px; border: 1px solid green;">
    </div>
</div>

Ответ 2

<div style="position:relative; width: 500px; height: 500px; border: 1px solid red;">
    <div style="position:absolute;right:0px;bottom:0px;width: 200px; height: 100px; border: 1px solid green;">
    </div>
</div>

Попробуйте. Короткая версия: позиция: относительная на внешнем div, позиция: абсолютная на внутреннем div и скажите, что вы хотите, чтобы внутренний div находился в 0 пикселях от правого и нижнего краев родительского контейнера.