花弁

CSS Анонимус 28 June 2009 (Sun) 18:23 No.2816

File: red-green.png
Png, 4.19 KB, 414×511 - Click the image to expand

Объясните пожалуйста, как сделать так чтобы блок совпадал своей нижней границей с нижней границей того блока, внутри которого он находится.

Проще говоря, чтобы он лежал на дне другого блока.

Вот пример кода:

<div style="height: 500px; width: 400px; background-color:green">
<div style="height: 300px; width: 200px; background-color:red; ">

</div>
</div>

Красный прямоугольник находится наверху, а должен быть внизу (как на картинке). Что надо дописать к коду? Большое спасибо заранее.

CSS Анонимус 28 June 2009 (Sun) 18:23 No.2816

File: red-green.png
Png, 4.19 KB, 414×511 - Click the image to expand

Анонимус 29 June 2009 (Mon) 05:49 No.2820

читай сюда
http://htmlbook.ru/content/?id=95

я бы сделал так:

position: relative;
top: 100%;
margin-top: -150px;

должно работать
на счет relative, не уверен
зависит от того, что снаружи
помнится, если снаружи relative,
то изнутри absolute тоже работает как relative
так что, это на глаз

Анонимус 29 June 2009 (Mon) 05:49 No.2820

Анонимус 29 June 2009 (Mon) 20:26 No.2826

дивам назначь класс или id.

например:

<div id="fst">
<div id="scnd"></div>
</div>

#fst {
height: 500px;
width: 500px;
background: green;
position: relative;
}

#scnd {
height: 300px;
width: 200px;
background: red;
position: absolute;
bottom: 0;
left: 0;
}

Анонимус 29 June 2009 (Mon) 20:26 No.2826