Как заставить блок прилипать к низу страницы в одной колонке?

Question

[Артём Кобяков]

Доброго времени суток, уважаемые верстальщики!
Помогите разобраться с версткой.
Как красный блок заставить прилипать к низу в зависимости от высоты левой колонки?
Спасибо

Answer 1

[Андрей Б.]

codepen.io/anon/pen/waKmaE

Comments

[Артём Кобяков]

Отличный пример, спасибо!!!

[Андрей Б.]

Артём Кобяков Кстати. чтобы контент в правой колонке не залезал под красный блок, задайте ей нижний padding равный высоте красного блока или чуть больше, для визуального отступа. Добавил в пример.

[Артём Кобяков]

Андрей Б.: Спасибо Вам большое! Все получилось!

Answer 2

[keslo]

Можно родительском блоку присвоить position: relative, а красному блоку position: absolute + bottom: 0.
См. подробное решение приведенное Андрей Б..

Comments

[Артём Кобяков]

Да все работает, только вот высота родительского блока почему то 1 px ((( поэтому прилипает к верху красный блок

[Роман]

Артём Кобяков: при позиции абсолют объект выпадает из потока, поэтому если этот красный блок имел отношение к высоте блока - то вам необходимо вручную задать ее.

[Артём Кобяков]

Роман: спасибо, вся проблема в том что левая и правая колонка float left и right - из за этого ничего не получается =(

[Андрей Б.]

Что за display: relative, что за display: absolute? Зачем писать несуразицу? Чтобы не "казалось", могли бы хотя бы в справочник заглянуть и освежить память.

[keslo]

Андрей Б.: в вашем примере те же самые display: relative для родителя и display: absolute для потомка.

[Андрей Б.]

keslo Что то не вижу. Где же вы такое увидели.

[keslo]

Андрей Б.:

[Андрей Б.]

keslo Все равно не вижу где тут display.

[keslo]

Андрей Б.: таки да. Вы правы. Конечно же position, а не display. Это моя ошибка.