Как я делаю две колонки

24 November, 2005

XHTML/CSS

Мне кажется не лишним будет поделиться несколькими, для бывалых кодеров конечно очевидными, методами. Немало об этом написано – но никогда не лишне навести порядок в голове. Разумеется все без таблиц.
Очевидно – если вы умеете делать две колонки – ничего не стоит сделать их тремя – просто разбив одну из них опять на две. И так далее…

Простые две колонки через CSS

Здесь я не буду описывать замороченные техники полурезиновых и на четверть эластичных дизайнов. Просто обычная фиксированная страница. Где размеры всех колонок указаны либо в пикселах, либо в процентах, либо в EMах. И имеем такой вот HTML:

  1. <div id=”wrap”>
  2. <div id=”main”>
  3. </div>
  4. <div id=”side”>
  5. </div>
  6. </div>

Вобщем далее HTML код меняться не будет. + для простоты буду считать что:

  1. #wrap{
  2. width:700px;
  3. }

FLOAT для двухколоночного дизайна

Проще всего сделать две колонки с помощью свойства FLOAT, вот так я их как правило и делаю: (ukr.net, pravda.com.ua, cssing)

  1. #main{
  2. float:left;
  3. width:500px;
  4. }
  5. #side{
  6. float:right;
  7. width:200px;
  8. }

Еще можно так

  1. #main{
  2. float:left;
  3. #side{
  4. float:left;

Вот и все. Для того что бы блок #wrap растянулся до своего содержимого(#side + #main) достаточно задать:

  1. #wrap{
  2. overflow:hidden;
  3. }

Вот пример с заданными границами для наглядности.(вариации с двумя float:left)
Еще есть такая вариация:

  1. #main{
  2. float:left;
  3. #side{
  4. margin-left:500px;

Но она самая негибкая и неверочная – ломается в некоторых версиях ИЕ 6 – и вообще предпочитаю так никогда не делать. Пример

Из недостатков float методов – при переполнении одного из блоков – колонка может сползать(в ИЕ конечно). Но с этим можно и нужно бороться.

абсолютное позиционирование

Как известно “absolutные” блоки позиционируются относительно ближайших родительских relative-блоков. Как по мне, position:absolute – один из самых сильных инструментов в построении страниц.
Вот такой ЦСС построит нам две колонки.

  1. #wrap{
  2. position:relative;
  3. }
  4. #main{
  5. position:absolute;
  6. left:0;
  7. width:500px;
  8. }
  9. #side{
  10. position:absolute;
  11. left:500px;
  12. width:200px;
  13. }

Вот пример с границами.
Оговорка тут лишь одна – футер мы не сможем отобразить ниже обоих блоков – прийдется его “внедрить” в одну из колонок, Эта техника применяется например на http://ru.id-as.com/, http://wired.com/. Легко заметить, что футер всегда содержится в одной из колонок. Издержки метода. Зато во всем остальном он практически идеален :).

Конец

Естественно эти штуки можно применять не только для лэйаута страницы – но и для небольших элементов на ней. В тоже время в роли #wrap может выступать любой блок – даже body.

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

В любом случае всегда рад слышать уточнения, советы, Ваши мнения и техники!

XHTML/CSS

39 комментариев к “Как я делаю две колонки”

Латрек | 1. 24 November, 2005

http://www.maxdesign.com.au/presentation/page_layouts/index.cfm
был там?

akella | 2. 24 November, 2005

Был конечно. Но это было давно и неправда – а по русски этого все равно нет. Навскидку не скажу но есть и подоходчивее ресурсы. Но все по аглицки.

Взять хоть доклады с конференций Дага Баумана и компании. Доклады “site in an hour” и т д…. Избитая тема – но все это капли в один сосуд.

uggallery | 3. 24 November, 2005

Все очень четко и ясно. Ничего лишнего. То, что нужно всем, с чего все начинают и на чем все обламываются. Освоить это да имидж-реплейсмент и все – верстальщик к работе готов. Ну, почти :)

Vladson | 4. 25 November, 2005

Мне вариант с позиционированием больше всех нравится

ganges | 5. 25 November, 2005

Faux column, source order?
Проще говоря, если #wrap’у задать бэкграундную картинку длиной в #side (шириной в 1пиксель нужным цветом) и спозиционировать ее top right repeat-y (для последнего действующего примера, естественно) – то мы получим типа 2 колонки разного цвета эквивалентной длины. Что ни говори – крутая техника во всех отношениях, а сколько она волос способна сэкономить :)
Более подробно гуглить запрос “faux column” или искать тоже на alistapart.com

Source order
Это конечно экзотика (или даже вообще – эзотерика) для нашего статус кво в веб-разработке, но все же.
Если важен сорс ордер – вариант с абсолютным позиционированием подходит идеально. Тут все просто – что первым идет в сорсе то первым и пойдет :) На экране разместить можно как хочешь

Этого нельзя сказать про float технику. Там плавающие блоки должны идти в определенной последовательности

Насчет футера я толи не свосем понял, толи не согласен. Еще один div и пусть идет себе футер отдельно :)

И еще (просто у меня счас нет возможности поиграться с этим) я вообще ничо не понял с
“Для того что бы блок #wrap растянулся до своего содержимого(#side + #main) достаточно задать: overflow:hidden;

не в курсах вообще, это что новый хак? :) как это для того чтобы “растянуть” надо выключать “переполнение”?
заранее спасибо за прояснение

akella | 6. 25 November, 2005

Faux column, source order?

очень не хотел нагружать еще и этим – это как бы отдельная тема. А ведь еще есть flexible faux…..

Этого нельзя сказать про float технику. Там плавающие блоки должны идти в определенной последовательности

Не согласен – в моем примере меняешь left и right местами – и блоки меняются местами на экране. В чем проблема?

Еще один div и пусть идет себе футер отдельно

Ну если блоки у тебя оба position:absolute – то как ты футер отобразишь ниже их обоих? clearing absolutes – вот как Шон Инман для этого извращался – без скрипта никак. Только внутрь одной из колонок…

overflow:hidden;

об этом действительно надо было поподробнее. Это замена старым <div class=”clear”></div> и <br style=”clear:both” /> для растягивания окаймляющего ДИВа до содержащихся ФЛОАТ блоков.

Однако не так давно выяснили что достаточно задать overflow:visible что бы блок сам растянулся до содержащихся внутри него ДИВов. Но при этом иногда возможны прокрутки в этом ДИВе. Более совершенный вариант overflow:hidden – который я и использую в своих буднях вебдева…

ganges | 7. 25 November, 2005

Спасибо, Акелла.

Vladson | 8. 26 November, 2005

И одна фишка, RSS чё-то глючит, видимо “title” не проходит фильтрацию HTML
Вместо
by: cssing » Архив » Как я делаю две колонки
Надо
by: cssing &raquo; Архив &raquo; Как я делаю две колонки

Tomaz | 9. 28 November, 2005

Можно даже в какой-то мере сказать, что они помогают эмулировать таблицы

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

Стандарт гласит, что если контент не помещается в смещаемый (float) блок, то он должен обрезаться. С этим я не могу смириться. По-моему это противоречит концепции accessibility, нарушение которой так часто вменяется в вину дизайнам, построенным на таблицах.

Например, мой сайт, с растагивающимся дизайном идеально смотрится на экране 800×600 и выше. Ширины всех колонок сайта задаются в процентах от экрана. Потом кто-то зайдет на него с устройства с меньшим разрешением (PDA) и какое-то длинное слово отобразится лишь на половину. По-моему это не допустимо. При использовании же таблиц в крайнем случае появится горизонтальная прокрутка.

И вообще, я поверю в устойчивый лэйаут страниц без таблиц, после того как увижу популярную CMS систему, постоенную по такому принципу.

akella | 10. 28 November, 2005

И вообще, я поверю в устойчивый лэйаут страниц без таблиц, после того как увижу популярную CMS систему, постоенную по такому принципу.

Навскидку Movable Type, WordPress, Textpattern и очень многие другие… Они как раз начали переход в первую очередь.

Потом кто-то зайдет на него с устройства с меньшим разрешением (PDA) и какое-то длинное слово отобразится лишь на половину

Вы слышали когда нибудь о medoa=heandheld? Видимо нет. Так же как и о media=screen которая отдает ЦСС лишь для компьютеров а не для ПДА. Никаких проблем возникнуть не может в принципе.

Насчет обрезания контента – для меня странно то что вы говорите. Я вам привел в пример(в посте) два самых посещаемых сайта моей страны – и они сделаны согласно этим техникам. Ничего не обрезается. Вам следует пристальнее всмотреться в эту технологию. Очень часто многие делают поспешные выводы не разобравшись до конца – не повторяйте ошибок.
Вопрос о доверии к CSS-layout давным лавно исчерпан ИМХО.

Tomaz | 11. 28 November, 2005

Я не зря писал сайт, с растягивающимся дизайном, Ширины всех колонок сайта задаются в процентах. При фиксированной ширине дизайна проблем, конечно не будет.

Смотрим:
http://ukr.net
http://pravda.com.ua/
http://textgarden.org/layouts/?c=blog (еще 23 примера для Textpattern)

Все вышеперечисленные сайты имеют фиксированные размеры ширины колонок.

Далее. Мой пример с PDA оказался неудачным. Я заговорил об обрезании контента, прочитав статью из вашего поста, где ее автор предлагает для устойчивости CSS-layout’a обрезать картинки или длинные URl’ы, которые не помещаются в контейнере, посредством overflow:hidden. Опять же, если размеры колонок будут фиксированные, тогда все ОК. Просто нужно следить за тем какой по ширине контент в них вставляется (хотя с таблицами этого делать не нужно). С “резиновыми” же колонками ситуация будет другая.

В конце-концов я нашел довольно устойчивый “резиновый” CSS дизайн на http://www.wired.com/. Не идеальный, но очень хороший.

Но объясните мне, пожалуйста, как без таблиц удовлетворить очень распространенное сочетание требований клиентов:
1) дизайн должен быть “резиновым”
2) для границ колонок используются разные небелые бэкграунды. Т.е. самая нижняя точка каждой из колонок должна визуально выравниваться по самой высокой из них. Faux columns здесь не годятся ввиду требования 1)

akella | 12. 28 November, 2005

Будем считать что wired.com вас удовлетворил как резиновый лэйаут. На самом же деле существует множество вариантов сделать 3 колонки.

Теперь о проблеме “колонок одинаковой высоты”. К счастью эта проблема тоже успешно решена. Можете почитать вот этот мой пост. Там даже есть пример. (и мой пример)

Tomaz | 13. 29 November, 2005

Спасибо за ссылки. Очень полезные. Буду “курить” CSS дальше.

zaARTix | 14. 5 December, 2005

[b]akella[/b]
что не пост – то споры о таблицах :)

cssing :: Архив :: cssing 2005 | 15. 27 December, 2005

[…] и мистические CSS свойства которые могут спасти от бед, таящихся в этом злобном броузере. Как я делаю две колонки – самые простыe две колонки которые только могут быть. Просто про […]

marik | 16. 4 March, 2006

Привіт!
Прикольно, скільки бачив технік(2 здається:) “очистки” флоатів, то з overflow:hidden зустрівся вперше…Щось у мене на блозі не спрацювало(футер що був у “wrap” розлізся), але це надихає що накінець мож буде здихатися атавізма як “очистки флоатів за допомогою структурного маркапа”.
Корисно!
Залік :)

Alex | 17. 25 October, 2006

А что насчет отрицательных маржинов, противоположных направлению float’а? :) – чтобы не падало.

akella | 18. 26 October, 2006

Это уже сложнее чем “простые две колонки” , а я все стремился к простоте и той самой прозрачности )

Ха, два ответа на Ваш комент и оба к одному свелись :)

Но спасибо – пожалуй для полноты действительно стоило бы добавить, ведь некоторые могли это расценить как более менее общую перепись всех техник для двух колонок.

Vladson | 19. 16 June, 2007

Вот кстати о простоте, я тут начитался всякого “бреда” (замечу в кавычках) и решил попробовать сделать 2 колонки как можно проще и вот к чему пришёл…

http://dkflbk.nm.ru/test002/

Нового в принципе ничего нет, 75% всего что там использовано я вычитал тут остальные 25% в других местах однако в том что касается простоты (и кроссбраузерности) мне кажется очень даже не плохо получилось…

(для тех кому лень идти по ссылке)
Главный принцип это задание фона фоновым цветом, и колонок картинкой по центру растянутой по вертикали (очень много где встречается этот способ)

Естественно “шапка” (“хеадер”) сделана типичнее некуда (на 99% “валидных” сайтов сделано также…)

Очень обидно что я никак не смог сделать “футер”, все решения которые приходили в голову слишком сложные и не кроссбраузерные (а это явно не вписывается в мои цели)

(Повторяю я не претендую на что-то новое, речь исключительно о простоте реализации)

akella | 20. 16 June, 2007

Спасибо – это отличный способ, единственный недостаток – футер, но его можно поместить в одну из колонок и тогда все зашибись )

Vladson | 21. 18 June, 2007

Да помещенте футера в одну из колонок техника знакомая (именно на этом самом сайте я впервые и увидел упомянание об этом способе) но мне кажется что это слегка “левый” вариант так-как мне кажется весь смысл “дивной-вёрстки” в том чтоб HTML-разметка была полностью независима от CSS-оформления а в данном случае получается что HTML придётся “подгонять” под оформление (т.е запихивать “футер” внутрь div-а одной из колонок хотя его место вовсе не там…)

Юрий | 22. 2 April, 2008

Вы такой умный.
Конечно, делать говносайты в говнодизайне можно и дивами.
А слабо порезать хороший дизайн и сделать его тянущимся без использования таблиц?
То-то же.

akella | 23. 2 April, 2008

*ROFL*
Вы заблуждаетесь. Я очень туп, и никогда в жизни не верстал красивые сайты :)
Тем не менее моего скудного ума хватает на приличный код, жаль что высоты мудрости которых вы достигли не позволяют вам научиться верстать :)

Gan | 24. 20 May, 2008

Заметил одну проблему с абсолютным позиционированием в браузере ie8!
если дать в двухколоночном макете правом и левом диву по 50% ширины почему то возникает горизонтальная полоса прокрутки! если же ничего соотношения процентное будет другое(не 50 на 50) то полоса прокрутки исчезает!
Что думаете по этому поводу?! И как это можно исправить?!

Gan | 25. 20 May, 2008

мля и откуда же берутся эти недоразвитые любители табличной верстки! Когда они уже вымрут! Когда мля до вас уже дойдет что дивы это стандарт а верстка таблицами изначально была ошибочной! Таблицы используют для другого – для табличных данных!
И так на заметку что бы не ломать голову как же заверстать дизайн на дивах надо изначально дизайнеру мыслить дивами и продумывать! Увы многие дизайнеры ограничиваются только знанием фотожопы и до остального а в частности что ихнии рисунки надо преврамтить в хтмл-страницы – им нет дела!

Gan | 26. 20 May, 2008

А все нашел решение! Надо для одного из дивов поставить left:0; а для другого right:0; (замест left:50% например)!

MadEx | 27. 1 September, 2008

Хорошая статья, только я вот уже битый час ломаю голову, а почему нельзя под …. в примере с абсолютным позицированием пихнуть ещё какой-нить … чтобы он просто за ним следом следовал? Я уже и так и сяк тыркался, не выходит. Выход есть?

akella | 28. 2 September, 2008

Можно только с джаваскриптом. Лучше использовать флоаты если нужно засунуть что-то под.

Ахилес | 29. 27 July, 2009

Может кому интересно.В 3 колонки, резина..

body {
margin: 0px;
padding:0px;
}

#wrap {
background-color:#CCFF99;
}

#head {
width: 100%;
height:150px;
background-color:#003366;
}

#left {
float: left;
width: 18%;
background-color:#999999;
}

#right {
float: right;
width: 18%;
background-color:#0066CC;
}

#content {
margin-left: auto;
margin-right: auto;
width: 63%;
background-color:#CCCCCC;
}

#footer {
float:right;
width: 100%;
height:50px;
background-color:#996633;
}

Ахилес | 30. 27 July, 2009

Для выравнивания по центру с #wrap width: 70%

#wrap {
background-color:#CCFF99;
width:70%;
margin-left:auto;
margin-right:auto;
}

yanesh | 31. 18 December, 2009

спасибо за пример)

Евгений | 32. 23 May, 2010

шапка, левая колонка под меню, область для динамического контента, подвал)
резинится норм…контент сносится до минимума, дивы не прыгают.
всем удачи!
=============
body{margin: 10 20 10 20;}

#wrap {background-color:#CCCCCC;}

#head {width:100%;background-color:#DDCCFF;}

#left{width:300px;background:#00CCFF;float:left;position:relative;z-index:1;}

#contentCont{float:right;width:100%;margin-left:-300px;background:#CCCССС;}

#content{margin-left:320px;background:#CCCССС;word-wrap:break-word;}

#footer {float:right;width: 100%;height:50px;background-color:#000000;}

============

head
left
content
footer

Евгений | 33. 23 May, 2010

опс…пардон

[div id=”wrap”]
[div id=”head”]head[/div]
[div id=”left”]left[/div]
[div id=”contentCont”][div id=”content”]content[/div][/div]
[div id=”footer”]footer[/div]
[/div]

“[” и “]” заменяем соответственно на “” )))

Евгений | 34. 23 May, 2010

блин…ну вообщем квадратные скобки на знаки больше и меньше)) кавычки тож нормальные нужно.
это для новичков)

kodiua | 35. 31 May, 2010

хоть пост и стары, но всё еще актуальный. Спасибо за объяснение.
Сам дошел до флоатов, но в опере и мазиле не растягивался див, помогло
overflow:hidden;
Спасибо.

Никита | 36. 18 August, 2010

Вопрос: у меня две картинки (кнопки от feedburner и tweecounter) они ложаться друг под друга. я пытаюсь их выставить в строчку через div style
пробовал

так же во втором div ставил position:right и absolute

Есть ещё варианты?

Levik | 37. 19 August, 2010

Несмотря на “возраст” статьи она не потеряла свою актуальность :) Отлично подходит в качестве пособия начинающему “верстальщику” (сам периодически “начинаю” верстать и в очередной раз обращаюсь к ней)

sweb27 | 38. 20 December, 2012

Спасибо, пригодилось статься, забыл про overflow:hidden; … глупо так, но бывает.

Vladson | 39. 20 December, 2012

Метод с абсолютным позиционированием вообще до гениальности идеален, особенно для фиксированной ширины. Причём в некоторых случаях можно даже на дивах сэкономить и задавать свойства для HTML и BODY а в отдельные DIV-ы уже пихать доп колонку (или даже не одну если аккуратно)
Более того, если учесть что в последнее время (слава богу) всё чаще встречается разметка по сантиметрам/дюймам то получается вообще просто (а главное более чем кросбраузерно)

Уже более чем 7 лет прошло (пост №4) сменилось не одно поколение новых “веяний моды” и даже поколений браузеров, а я в этом способе так и не разочаровался.

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