14 августа, 2008

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

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

Проблема

Поместить блок в одну из колонок одинаковой высоты, и прижать к низу:

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

При этом, если вдруг контента в колонке станет много, поведение должно быть таким:

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

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

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

Согласитесь, картинка в формате JPG и Ницше, это как-то глупо.

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

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

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

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, обычное

Идея крайне простая. Так как колонки у нас на самом деле не одинаковой высоты физически (видимость одинаковой высоты создает картинка). То ориентироваться можно лишь по низу обертки, в данном случае #out. Таким образом, достаточно поместить цитату Ницше в левый нижний угол блока #out, освободив при этом место внизу колонки #left:

  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

Второе известное мне решение, основано на отрицательных отступах. Мы просто помещаем блок с цитатой после блока #out, и задаем ему отрицательный отступ вверх, вот так:

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

Пример этого метода

В конце

Будь то Ницше или Малевич, мы всегда сможем их прижать к низу ;-)

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

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

XHTML/CSS

Комментарии(36) к “Блок внизу одной из колонок”

1. 14 августа | Mourner

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

Стоп. Юра, ты что - на постоянку устроился? :-O

2. 14 августа | шкутер

как быть, если высота блока неизвестна?

3. 14 августа | akella

@шкутер, например? Если там текст, то всегда можно заменить 200px на 20em.
Редкий дизайнер додумается вставлять вниз блок который может состоять из нескольких пассажей, или не иметь хотя бы примерной максимальной высоты.
Каков ваш случай?

@Mourner: нет! что ты! Какой работодатель вынесет мой скверный характер и привычку писать в блог!
Просто, по невероятному совпадению, один знакомый работодатель задал эту задачу (с моей подачи) одной знакомой верстальщице. Невероятность этого события известна мне с точностью до 10го знака, и составляла 1 к 38,0969706428… Что, по не менее невероятному стечению обстоятельств является моим телефоном!

4. 14 августа | Zigzag

Собсна, спасибо. Мне пока не приходилось таких вещей делать (почему-то =)), теперь заранее буду знать решение =)

5. 14 августа | шкутер

например, если текст меняется (у меня это текстовый баннер), я ничего не придумал, делаю как в решении#1, только padding-bottom высчитываю через js

6. 14 августа | akella

Все равно ведь известно что-то о том тексте, что там появляется, и можно просто указать максимальный padding — освободив ему тем самым место с запасом.

7. 14 августа | шкутер

тогда блок будет не в самом низу :)

8. 14 августа | akella

Почему это? Какая бы высота у него ни была, задав ему bottom:0; он прилипнет к низу. Ты уверен что ничего не путаешь?
Проблема при неизвестной высоте лишь в том, сколько места выделять в колонке для блока (padding-bottom:200px) а вместо этого можно задать просто максимульную высоту, и блок все равно всегда будет внизу колонки.

В моем примере, 200px это как раз высота блока с запасом, и он прекрасно покоится внизу странички.

9. 14 августа | шкутер

я имел в виду вот что http://uploads.screenshot-program.com/my.php?image=upl3702083586.png а хотелось бы так http://uploads.screenshot-program.com/my.php?image=upl8411702797.png

10. 14 августа | Sam

Пользовался #2, но несколько для других целей. Решение хорошее, но IE6 от #2 в некоторых редких случаях начинает отбрыкиваться, кушая часть блока.

Пример отбрыкивания привести сейчас не смогу… надо начинать сохранять бажные варианты вёрстки :)

11. 14 августа | akella

@шкутер: теперь понял, ну тут уж или мириться или джаваскриптом, да… Есть еще замороченный способ с помощью display:table-cell;, но он настолько заморочен, что пожалуй не стоит о нем думать =)

Тут ведь еще должно быть так по дизайну продумано, что такая ситуация крайне редка, иначе засовывать блок вниз колонки просто некрасиво ее будет удлинять. Издержки “максимальной высоты” вобщем.

@Sam: потому я два и вспомнил) я их поочереди использую, один брыкается, сразу второй и дальше…

12. 14 августа | Tokolist

2 шкутер
Как вариант, дублировать прыжимаемый к низу блок #bottom в конце левой колонки #left и при этом сделать visibility: hidden.

13. 14 августа | шкутер

2 akella
ситуация действительно крайне редка, случайно столкнулся на работающем не 1 год сайте

2 Tokolist
это не наш метод :)

14. 14 августа | Jman

Блииин, я типа такого (точнее сказать тоже самое, только там не текст а место под четыре счётчика или типа того) делал около месяца назад, для одного интернет магазина элитной косметики. Тоже думал написать… но после того как проект запустят. Опередили :(

15. 14 августа | Михаил Валенцев

Пару дней назад столкнулся с следующим: способ №1 не работает в FF2, если у колонки заданы min-height и overflow:hidden - был очень удивлен этим моментом.

16. 14 августа | akella

@Михаил Валенцев для какой колонки? Я попробовал задать, все работает… Возможно это было вызвано чем-то другим? Есть пример?

17. 14 августа | Gan

Обычно пользуюсь первым способом! вторым никогда не пробовал надо будет попробовать при случае!

18. 14 августа | Tokolist

2 шкутер
Таблицы уж наверняка не наш метод, поэтому пользуемся возможностями скриптов :)

19. 14 августа | grossu

Вот первый способ для непрофессионала вроде меня — очень хорош. А то голову сломал с этими absolute и relative.

20. 15 августа | Михаил Валенцев

@akella
Пример: http://valentsev.ru/bugs/4cssing/
FF3 - ок. FF2 - :(

21. 15 августа | art

хороший пример! еще в начале подумал про рещение 1, потому что немного перепутал ленты и думал это вопрос в сообществе (:
а оказалось, что это решение тут и есть
правда я другим способом для вытягивания сайдбара пользуюсь

22. 15 августа | BeTePoK

@akella
Я вас очень уважаю, ваш блог у меня в закладках на первом месте. Можно сказать xhtml-кумир ;)
Удивили комментарии к этой статье. В ваших постах порой проскакивают великолепные идеи и решения. Странно, что этот прием, который напрашивается из правил верстки, привлек столько внимания читателей и что многие этим не пользовались.

23. 15 августа | akella

Я бы сам не догадался об этом написать, если бы меня аж два раза за неделю не спросили =)
я и во время написания сомневался, не слишком ли это все просто, но тяга ваять примеры к постам победила. Да и обожаю я простые идеи =)

Спасибо за добрые слова!

24. 16 августа | Vladson

>>> не слишком ли это все просто
Минимум 80% людей называющих себя специалистами в тех или иных областях, не знают даже таких элементарных вещей. Так что не бойся писать очевидное, всегда найдутся люди нашедшие для себя что-то новое…

25. 17 августа | eater

akella
“1 к 38,0969706428… Что, по не менее невероятному стечению обстоятельств является моим телефоном!”

А де копірайт? Це ж із HHGTTG

26. 17 августа | Tokolist

2 BeTePoK
Порой комментарии к постам об очевидных вещах бывают интересней самого поста. Попробуйте решите задачу шкутера элегантно. Да и вообще, в верстке всем давно практически все известно. О чем тогда писать если не об очевидном? Поэтому, наверное, здесь порой проскакивают посты типа “Зачем жить” :)

27. 18 августа | Макисим Покровский

>> Собсна, спасибо. Мне пока не приходилось таких вещей делать (почему-то =)), теперь заранее буду знать решение =)

@Zigzag, а то ты не знал :)

28. 18 августа | Mourner

@akella, смотри мне *укоризненно машет пальцем*

просто я прочитал как “вчера эту задачу (мы) задали”

29. 20 августа | Алик

Классное решение простое и оригинальное. Респект.

30. 27 августа | Иван Петрович

Блогеры ведь в основном на движке сидят, они редко чего сами мастерят, мне кажется.

31. 4 сентября | Паша

Спасибочки за информацию. Я не так давно занялся ВЕБдизайном, на курсах вообще мало чего дают, поэтому всякие маленькие хитрости для меня в самый раз.

32. 9 сентября | Nikita

Я делал похоже на первый пример, только немного по-другому:
После колонок у меня шел футер с clear: both и position: relative, а в нем этот блок с position: absolute и отрицательными отступами.

33. 9 сентября | cross

Подобная задача реально часто становится при верстке сайта. Спасибо за решение.

34. 16 сентября | CooLer

Полезная статья, спасибо. Буду пробовать.

35. 18 сентября | Сапавец

Интересно, буду юзать теперь. Спасибо

36. 21 сентября | Dim

Спасибо. Уже попробовал.

Оставить комментарий

Комментировать

Обязательные поля

Ссылки

Последние 5