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

14 August, 2008

XHTML/CSS

О том как это сделать меня спросили 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

39 комментариев к “Блок внизу одной из колонок”

Mourner | 1. 14 August, 2008

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

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

шкутер | 2. 14 August, 2008

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

akella | 3. 14 August, 2008

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

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

Zigzag | 4. 14 August, 2008

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

шкутер | 5. 14 August, 2008

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

akella | 6. 14 August, 2008

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

шкутер | 7. 14 August, 2008

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

akella | 8. 14 August, 2008

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

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

шкутер | 9. 14 August, 2008

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

Sam | 10. 14 August, 2008

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

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

akella | 11. 14 August, 2008

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

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

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

Tokolist | 12. 14 August, 2008

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

шкутер | 13. 14 August, 2008

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

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

Jman | 14. 14 August, 2008

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

Михаил Валенцев | 15. 14 August, 2008

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

akella | 16. 14 August, 2008

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

Gan | 17. 14 August, 2008

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

Tokolist | 18. 14 August, 2008

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

grossu | 19. 14 August, 2008

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

Михаил Валенцев | 20. 15 August, 2008

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

art | 21. 15 August, 2008

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

BeTePoK | 22. 15 August, 2008

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

akella | 23. 15 August, 2008

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

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

Vladson | 24. 16 August, 2008

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

eater | 25. 17 August, 2008

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

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

Tokolist | 26. 17 August, 2008

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

Макисим Покровский | 27. 18 August, 2008

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

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

Mourner | 28. 18 August, 2008

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

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

Алик | 29. 20 August, 2008

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

Иван Петрович | 30. 27 August, 2008

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

Паша | 31. 4 September, 2008

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

Nikita | 32. 9 September, 2008

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

cross | 33. 9 September, 2008

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

CooLer | 34. 16 September, 2008

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

Сапавец | 35. 18 September, 2008

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

Dim | 36. 21 September, 2008

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

AMBA | 37. 9 September, 2009

А если высота блока нужна в 100% по высоте? 100% по высоте + паддинг это уже будет больше чем 100%. Да и margin тут не годится.

dscoma | 38. 26 October, 2009

А мы пощли еще дальше, результат немного юмористический, но довольно интресный.
Цель ставилась проверить, за какое кол-во времени, возможно повторить ваш пример, только не изучая его – итог 5 минут.

#wrapper {
background: #ff0000;
border-bottom: 10px solid #ff0000;
margin: 0px auto;
width: 800px;
height: 600px;
}

#right {
background: #fff200;
border-top: 10px solid #00ff84;
float: left;
font-size: 12px;
width: 290px;
height: 405px;
}

#left {
background: #00ff84;
float: left;
padding: 10px 0px 0px 10px;
width: 490px;
height: 405px;
}

#bottom {
background: #00bbff;
border-left: 10px solid #00ff84;
width: 450px;
height: 80px;
padding-top: 500px;
}

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

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

Как только благоразумие говорит: «Не делай этого, это
будет дурно истолковано», я всегда поступаю вопреки ему.Ницше

akella | 39. 27 October, 2009

Был бы рад если бы вы показали пример!
Так же я заметил что у всех блоков задана высота, это правда так важно для вашего примера? ) Потому что обычно это невозможно

Я обычно стараюсь не описывать идеи которые реализуются дольше 5 минут :)

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