CSSing – Блог про CSS и все что с этим связано. Новые приемы и технологии и т д.

Блок внизу одной из колонок

О том как это сделать меня спросили 2 раза за последние 3 дня, потому... Простой приём, вряд ли это будет полезно опытным кодерам, но наверняка принесет кому-то пользу.

Проблема

Блок внизу колонки

Поведение при длинной колонке

Конечно, умный читатель сразу, подметит что эту картинку внизу можно было бы сделать и обычным фоновым рисунком, с background-position:left bottom. Но что если вместо гениальной картины Малевича внизу будет фраза Ницше?

Текстовый блок внизу колонки

Вобщем, это я к тому, что туда нужно поместить блок, а не просто фоновую картинку.

Будем считать, что кунг-фу колонок одинаковой высоты все уже умеют делать. Тогда после нехитрого CSS, у нас будет что-то вроде этого:

Обычные две колонки одинаковой высоты

1. #out{
2. background:#fff url(str.png) repeat-y 0 0; /*колонки "одинаковой" высоты*/
3. }
4. #left{width:200px;float:left;}
5. #right{width:500px;float:right;}

Решение #1, обычное

1. #out{
2. position:relative; /*точка отсчета для absolute*/
3. }
4. #left{
5. padding-bottom:200px; /*место в колонке для нижнего дива*/
6. }
7. #bottom{
8. position:absolute;
9. bottom:0; /*левый нижний угол #out и левой колонки*/
10. left:0;
11. }

Решение #2

1. #left{
2. padding-bottom:200px; /*место для нижнего дива*/
3. }
4. #bottom{
5. margin-top:-200px;
6. position:relative; /*чтобы блок отобразился поверх #out*/
7. }

В конце

Кроме всего прочего, вчера эту задачу задали верстальщику на собеседовании. ;-)

Буду рад если поделитесь идеями на эту тему, или похожими проблемами, которые мы тут же решим все вместе.