Блочная верстка в 3 колонки (fluid layout)

Эта статья из A List Apart послужила большим источником вдохновения для меня. После «тест-драйва» указанного в ней метода, я решил применить отрицательные внешние полоски (negative margins) с точностью до наоборот.

Я думаю, что главное преимущество этой техники состоит в том, что используется меньше несемантических элементов и на один плавающий блок меньше. Это также, лечит маленькие проблемы, не перечисленные в оригинальном демонстрационном примере:

  • Ссылки в правой колонке не работают в Opera 6
  • Возникают проблемы с прорисовкой фона в MSIE
  • В разметке отсутствует структурный хак, который не позволяет очистить место после левой колонки в Netscape Navigator 6

Мой новый метод не использует:

  • CSS хаки
  • Структурные хаки для очистки плавающих элементов
  • IE/Win условные комментарии
  • Загадочные CSS правила
  • Длинные таблицы стилей
  • Надписи «Best viewed in...» (см. список поддерживаемых браузеров)

Эта страница показывает основную технику, но я создал «более сложный» проект, основанный на этом решении: это - вызов CSS.

Логика

Изображение ниже показывает, как работает макет. Я сдвигаю блок #container влево вместо правой стороны (противоположность тому что сделано в статье ALA), и самая важная часть - то, что я не делаю плавающим блок #sidebar.

Разметка

<body> <div id="outer_wrapper"> <div id="wrapper"> <div id="header"> <h2>Header</h2> <p>...</p> </div><!-- /header --> <div id="container"> <div id="left"> <h1>Left</h1> <ol> <li>...</li> <li>...</li> <li>...</li> <li>...</li> <li>...</li> </ol> </div><!-- /left --> <div id="main"> <h1>Main</h1> <p>...</p> </div><!-- /main --> <!-- This is for NN6 --> <div class="clearing">&nbsp;</div> </div><!-- /container --> <div id="sidebar"> <h1>Sidebar</h1> <p>...</p> </div><!-- /sidebar --> <!-- This is for NN4 --> <div class="clearing">&nbsp;</div> <div id="footer"> <h2>Footer</h2> <p>...</p> </div><!-- /footer --> </div><!-- /wrapper --> </div><!-- /outer_wrapper --&;gt; </body>

CSS файлы

Я привожу здесь только стили относящиеся к разметке. Названия картинок и пути упрощены для наглядности.

Таблица стилей для современных браузеров (подключаем через @important):

#outer_wrapper { /* т.к. min-width не поддерживается IE, мы будем использовать скрипт написанный PVII */ min-width:740px; /* Правило для решения бага прорисовки фона в IE, но т.к. оно создает промежуток под футером, мы добавим такое же правило в блок #footer */ width:100%; /* Техника ложных колонок (faux-column), левая колонка */ background:#fff url(left.gif) repeat-y left } #wrapper { /* Техника ложных колонок (faux-column), правая колонка */ background:url(right.gif) repeat-y right } #header { border:1px solid #b0b0b0; background:#b0b0b0; /* Задаем "определение позиции" для элемента и устраняем peek-a-boo баг в IE (v6 sp2) */ width:100%; /* Предыдущее правило создает горизонтальную прокрутку в IE, избавимся от нее */ margin:0 -1px } #container { float:left; width:100%; /* IE удваивает внешние полоски (margins) у плавающих элементов, позаботимся об этой проблеме */ display:inline; /* Тут мы расходимся во мнениях с Ryan Brill (автором статьи в ALA) */ margin-left:-200px } #left { float:left; width:150px; /* IE удваивает внешние полоски (margins) у плавающих элементов, позаботимся об этой проблеме */ display:inline; margin-left:200px } #main { /* ширина левой колонки #left (150px) + отрицательное поле (negative margin) у блока #container (200px) */ margin-left:350px } /* Примечание: если блок #sidebar будет короче чем блок #main, тогда можете удалить это правило */ #sidebar { /* Для сохранения контента блока #sidebar справа от блока #main, если контента в #main меньше */ padding-left:100%; /* Возвращаем блок #sidebar на место, который был вытеснен из вьюпорта из-за отступа */ margin-left:-200px } #sidebar p { /* Удостоверимся что IE (v6 sp2) отображает элемент (та же проблема что и с блоком #header, но решение другое) */ position:relative } #footer { /* См. блок #outer_wrapper */ width:100%; /* Для очистки #container */ clear:both; border-top:1px solid #b0b0b0; border-bottom:1px solid #b0b0b0; background:#b0b0b0} /* Этот класс применяется к 2-м структурным хакам в разметке. Первый "бессмысленный" элемент используется для очистки блока #left в NN6, а последний для очистки #container в NN4 */ .clearing {height:0;clear:both}

Вы заметили, что несколько правил используются только для MSIE/Win, поэтому я советую вам убрать их из основной таблицы стилей CSS и включить в документ с помощью условных комментариев IE.

Стили для старых браузеров 4 версий:

Т.к. мы решили сделать поддержку NN4, необходимо указывать корневые относительные пути к картинкам в таблицах стилей.

#outer_wrapper { /* Техника ложных колонок (faux-column), левая колонка */ background-image:url(/корневой относительный путь/outer_wrapper.gif); background-repeat:repeat-y; border:1px solid #b0b0b0 } #header,#footer { /* Заставим блоки расшириться до 100% ширины */ width:150%; /* Данный трюк позволит закрасить блок целиком, а не только область под контентом */ background:#b0b0b0 url(/корневой относительный путь/clear.gif) } #container { /* Удостоверимся что NN4 не отрисует фон в этом элементе */ background-image:none; float:left; width:auto; /* Внешняя и внутрянняя полоски нужны чтобы оставить место для блока #sidebar */ margin-right:160px; padding-right:160px } #left { float:left; width:140px } #main { /* В NN4, очень важно корректно определить background для позиционированных элементов. Если NN4 не найдет картинку, то разметка разрушится */ background-image:url(/корневой относительный путь/clear.gif); /* это правило сохранит оболочку внутри вьюпорта */ margin:0 } #sidebar { /* Определяем фоновый цвет для блока #sidebar; я также удостоверился чтобы он не наследовал фоновые картинки */ background:#ccc none; margin:0; padding:10px 0; /* В современных браузерах этот элемент не плавающий, а вот в NN4 он должен быть плавающим */ float:right; width:180px } /* Этот класс используется для структурных хаков в разметке */ .clearing {clear:both}

Современные браузеры проигнорируют эти стили, т.к. я использую специальный скрипт:

if (!document.getElementById) document.write('<link rel="stylesheet" type="text/css" href="/css/v4.css">');

Список поддерживаемых браузеров

Windows:

  • NN 4.7*
  • FireFox 0.8
  • FireFox 1.0.7
  • Opera 6.05
  • Opera 7.23
  • Opera 8.5
  • Netscape 6.2
  • Netscape 7.1
  • Netscape 8.0
  • IE 5.00
  • IE 5.01
  • IE 5.5
  • IE 6.0
  • Mozilla 1.4.1
  • Mozilla 1.7.5

Mac OS:

  • NN 4.7*
  • FireFox 1.0
  • Mozilla 1.7.3
  • Camino 0.8.2
  • IE5.0 (OS9)
  • IE5.2 (OSX)
  • Safari 1.2.4

Mandrake:

  • Mozilla 1.7.5
  • Konqueror 3.3

Red Hat 9:

  • Mozilla 1.21
  • Konqueror 3.1-12
  • Netscape 7.2
  • Opera 8 Beta

Ubuntu 5.10 breezy badger:

  • Epiphany 1.8.12
  • Firefox 1.0.7
  • Mozilla 1.7.12
  • Opera 8.5

* - макет жидкий, но колонки разные по высоте. В версии вызов CSS, колонки одинаковой высоты.

Если у Вас установлен другой браузер и макет выглядит нормально, пожалуйста дайте мне знать и я включу его в этот список.

Поделись с друзьями:
Комментарии

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

Да не за что ;-) Собственно статью написали ребята из TJKDesign, а я только перевел ее. Если вдруг появятся вопросы, пиши на форум, чем смогу помогу.

Подскажите а как сделать чтобы правая колонка скрывалась в некоторых разделах, т.е. чтобы на главной было 3 колонки а на другой странице 2 колонки

Если Вы оставите подключенным исходный файл стилей, то под ним включите еще один файл стилей например 2col.css:
<code class="css">#container {float:none; margin-left:0;}
#left {float:left; width:150px; margin-left:0;
#sidebar {display:none; padding-left:0; margin-left:0;}
</code>

Я не проверял, но навскидку должно работать. Правда поисковикам может не понравиться что вы скрываете колонку свойством <kbd>display:none;</kbd>. На этот случай могу Вам порекомендовать сделать еще один шаблон на основе 3 колоночного, удалить из него код колонки <kbd>#sidebar</kbd> и в файле стилей изменить стили для блоков так, как я написал выше. Если не выйдет, пишите, что нибудь придумаем ;-)

А в IE8 такая верстка уже не прокатывает...

Ну IE8 вроде еще не вышел, а как выйдет, думаю, можно будет и под него подогнать))

Если использую даный способ, в нутри .main при использовании clear, контент уходит ниже .left
Как бороться.... усердно пытаюся найти

Огромное спосибо за статью ))

Как - то сложно все. А в чем преимущество данного способа перед стандартным, когда блоки left, content и sidebar помещаются в container, при этом sidebar и left - плавающие, а content-у задаются левые и правые margin, равные ширине крайних колонок?

Google Chrome 4.0.249.43 под Linux (Mandriva One 2010.0) — работает.

Под Windows аналогично. В Mozilla Firefox 3.6.3 тоже работает отлично

В листинге таблицы стилей в некоторых местах пропущены [;], закрывающие правило
(например, width:180px)

Решение с padding-left:100% для sidebar нельзя назвать изящным; попробуйте назначить этому селектору background красного цвета и увидите, что я имею ввиду.

В браузере Chromium 8.0.552.28 под Gentoo Linux всё отображается отлично. То же самое должно быть применимо и к подавляющему большинству других linux-дистрибутивов.

Аватар пользователя BillyEpige BillyEpige

Здравствуйте

Скорее всего, как и многим другим иной раз охота забыться и включить голову и тут мне нередко служит поддержкой музыка...
Я обретаю свое спокойствие и тишину в композициях группы АукцЫон, за прослушиванием песен я могу быть более 2х часов подряд, все затруднения уходят при душевном звуке.

Каждый приглядывает свое место где слушать аудио онлайн, я перепробовал более чем 10 сервисов и избираю https://saunmusic.ru

Основное достоинство этого музыкального ресурса, что он не требует регистрации и смс

Подскажете не менее душевный проект?
Спасибо за подсказки

Аватар пользователя HYDRAliz HYDRAliz

Открыть сайт ГИДРА зеркало в обход блокировки можно по официальной ссылке ГИДРА ссылка

Аватар пользователя HYDRAliz HYDRAliz

Открыть сайт ГИДРА зеркало в обход блокировки можно по официальной ссылке ГИДРА ссылка

Аватар пользователя BillyEpige BillyEpige

Добрый день!

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

Всякий избирает особое место где слушать композиции онлайн, я испытала более чем 15 ресурсов и выбираю https://muzaza.ru

Первое преимущество этого музыкального сервиса, что он не требует регистрации и смс

Быть может вам известен не менее хороший сайт?
Благодарю!

Аватар пользователя BillyEpige BillyEpige

Добрый день!

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

Всякий избирает особое место где слушать композиции онлайн, я испытала более чем 15 ресурсов и выбираю https://muzaza.ru

Первое преимущество этого музыкального сервиса, что он не требует регистрации и смс

Быть может вам известен не менее хороший сайт?
Благодарю!

Аватар пользователя InstaDresshox InstaDresshox

Create your life inviting with our dresses! Our sewing works produces two collections of dresses a year. We deal out our brand-new products at the associating exhibition. We want that you will also call our stall at the exhibition or go our website SHOPDRESS.

Аватар пользователя meriloksqas meriloksqas

Кино, Видео

Аватар пользователя MusorPinee MusorPinee

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

Аватар пользователя VeinerdsdBluch VeinerdsdBluch

Новое лицензированное онлайн-казино SOL с уникальным дизайном дарит все новым игрокам бонус в размере 100 000 рублей. ЖМИ ПОЛУЧИТ БОНУС

Аватар пользователя VeinerdsdBluch VeinerdsdBluch

Новое лицензированное онлайн-казино SOL с уникальным дизайном дарит все новым игрокам бонус в размере 100 000 рублей. ЖМИ ПОЛУЧИТ БОНУС

Аватар пользователя BrantGarp BrantGarp

Write My Essay - EssayErudite.com

Fed up of typing "who can write my essay" in the search bar?
Would you like to have a reliable helper always by your side?
Our website will come as an excellent solution to write my essay for everyone!

college paper writing service
correct my essay
compare and contrast essay topics
buy dissertation
definition essay topics

Essay Writing Service - EssayErudite.com

Our essay writing service provides a full-scale writing assistance accessible online 24/7.
Apart from many other writing companies, we are rather picky when forming a professional staff of experts.
Moreover, we try to make our every customer feel safe and pleased with the service.

do my essay
thesis writing service
cheap essay writing service
write my essay
best essay writing service

Аватар пользователя BrianLoody BrianLoody

essay writing service

Academic writing made easy!Get your paper written by a professional academic writer.

ESSAYERUDITE.COM

argumentative essay topics
write my essay
write essays for me
assignment help
narrative essay topics

Аватар пользователя GalenLabe GalenLabe

Write My Paper - EssayErudite.com

Looking for an expert to write my paper for you? You are at the right place.
Providing superior writing service appears to be our main specialization and passion.
Our website is the best destination for every English-speaking student who calls for assistance when handling his or her daily academic tasks.

persuasive essay topics
definition essay topics
dissertation writing service
thesis writing service
thesis help online

Аватар пользователя BrantGarp BrantGarp

Write My Essay - EssayErudite.com

Fed up of typing "who can write my essay" in the search bar?
Would you like to have a reliable helper always by your side?
Our website will come as an excellent solution to write my essay for everyone!

thesis writing service
argumentative essay topics
write my essay
write essays for me
cause and effect essay topics

Essay Writing Service - EssayErudite.com

Our essay writing service provides a full-scale writing assistance accessible online 24/7.
Apart from many other writing companies, we are rather picky when forming a professional staff of experts.
Moreover, we try to make our every customer feel safe and pleased with the service.

dissertation writing service
write essays for me
edit my essay
correct my essay
write my thesis

Аватар пользователя BrianLoody BrianLoody

essay writing service

Academic writing made easy!Get your paper written by a professional academic writer.

ESSAYERUDITE.COM

edit my essay
write my thesis
narrative essay topics
buy dissertation
informative essay topics

Аватар пользователя GalenLabe GalenLabe

Write My Paper - EssayErudite.com

Looking for an expert to write my paper for you? You are at the right place.
Providing superior writing service appears to be our main specialization and passion.
Our website is the best destination for every English-speaking student who calls for assistance when handling his or her daily academic tasks.

write my thesis
persuasive essay topics
edit my essay
buy dissertation
buy essay

Аватар пользователя BrantGarp BrantGarp

Write My Essay - EssayErudite.com

Fed up of typing "who can write my essay" in the search bar?
Would you like to have a reliable helper always by your side?
Our website will come as an excellent solution to write my essay for everyone!

do my homework
narrative essay topics
college essay help
write my research paper
essay writing service

Essay Writing Service - EssayErudite.com

Our essay writing service provides a full-scale writing assistance accessible online 24/7.
Apart from many other writing companies, we are rather picky when forming a professional staff of experts.
Moreover, we try to make our every customer feel safe and pleased with the service.

correct my essay
do my homework
college essay help
assignment help
expository essay topics

Аватар пользователя BrianLoody BrianLoody

essay writing service

Academic writing made easy!Get your paper written by a professional academic writer.

ESSAYERUDITE.COM

correct my essay
narrative essay topics
informative essay topics
expository essay topics
thesis writing service

Аватар пользователя GalenLabe GalenLabe

Write My Paper - EssayErudite.com

Looking for an expert to write my paper for you? You are at the right place.
Providing superior writing service appears to be our main specialization and passion.
Our website is the best destination for every English-speaking student who calls for assistance when handling his or her daily academic tasks.

do my homework
research paper topics
narrative essay topics
do my essay
buy essays online

Аватар пользователя BrantGarp BrantGarp

Write My Essay - EssayErudite.com

Fed up of typing "who can write my essay" in the search bar?
Would you like to have a reliable helper always by your side?
Our website will come as an excellent solution to write my essay for everyone!

expository essay topics
thesis help online
write my thesis
essay writing service
college essay help

Essay Writing Service - EssayErudite.com

Our essay writing service provides a full-scale writing assistance accessible online 24/7.
Apart from many other writing companies, we are rather picky when forming a professional staff of experts.
Moreover, we try to make our every customer feel safe and pleased with the service.

research paper topics
buy dissertation
assignment help
college paper writing service
edit my essay

Аватар пользователя BrianLoody BrianLoody

essay writing service

Academic writing made easy!Get your paper written by a professional academic writer.

ESSAYERUDITE.COM

compare and contrast essay topics
write essays for me
assignment help
essay writing service
edit my essay

Аватар пользователя GalenLabe GalenLabe

Write My Paper - EssayErudite.com

Looking for an expert to write my paper for you? You are at the right place.
Providing superior writing service appears to be our main specialization and passion.
Our website is the best destination for every English-speaking student who calls for assistance when handling his or her daily academic tasks.

essay help
informative essay topics
persuasive essay topics
paper writing service
essay writing service

Аватар пользователя BrantGarp BrantGarp

Write My Essay - EssayErudite.com

Fed up of typing "who can write my essay" in the search bar?
Would you like to have a reliable helper always by your side?
Our website will come as an excellent solution to write my essay for everyone!

persuasive essay topics
write essays for me
thesis writing service
buy essays online
research paper topics

Essay Writing Service - EssayErudite.com

Our essay writing service provides a full-scale writing assistance accessible online 24/7.
Apart from many other writing companies, we are rather picky when forming a professional staff of experts.
Moreover, we try to make our every customer feel safe and pleased with the service.

assignment help
buy essay
write my paper
do my homework
informative essay topics

Аватар пользователя BrianLoody BrianLoody

essay writing service

Academic writing made easy!Get your paper written by a professional academic writer.

ESSAYERUDITE.COM

research paper topics
write my research paper
argumentative essay topics
buy dissertation
write my thesis

Аватар пользователя GalenLabe GalenLabe

Write My Paper - EssayErudite.com

Looking for an expert to write my paper for you? You are at the right place.
Providing superior writing service appears to be our main specialization and passion.
Our website is the best destination for every English-speaking student who calls for assistance when handling his or her daily academic tasks.

write my essay
write my research paper
narrative essay topics
buy essays online
buy dissertation

Аватар пользователя BrantGarp BrantGarp

Write My Essay - EssayErudite.com

Fed up of typing "who can write my essay" in the search bar?
Would you like to have a reliable helper always by your side?
Our website will come as an excellent solution to write my essay for everyone!

argumentative essay topics
write my paper
narrative essay topics
type my essay
persuasive essay topics

Essay Writing Service - EssayErudite.com

Our essay writing service provides a full-scale writing assistance accessible online 24/7.
Apart from many other writing companies, we are rather picky when forming a professional staff of experts.
Moreover, we try to make our every customer feel safe and pleased with the service.

cheap essay writing service
essay writing service
essay writing service
buy essay
do my homework

Essay Writing Service - EssayErudite.com

Our essay writing service provides a full-scale writing assistance accessible online 24/7.
Apart from many other writing companies, we are rather picky when forming a professional staff of experts.
Moreover, we try to make our every customer feel safe and pleased with the service.

cheap essay writing service
essay writing service
essay writing service
buy essay
do my homework

Аватар пользователя BrianLoody BrianLoody

essay writing service

Academic writing made easy!Get your paper written by a professional academic writer.

ESSAYERUDITE.COM

argumentative essay topics
buy essay
thesis writing service
compare and contrast essay topics
dissertation writing help

Аватар пользователя GalenLabe GalenLabe

Write My Paper - EssayErudite.com

Looking for an expert to write my paper for you? You are at the right place.
Providing superior writing service appears to be our main specialization and passion.
Our website is the best destination for every English-speaking student who calls for assistance when handling his or her daily academic tasks.

college paper writing service
informative essay topics
write my essay
assignment help
compare and contrast essay topics

Аватар пользователя BrantGarp BrantGarp

Write My Essay - EssayErudite.com

Fed up of typing "who can write my essay" in the search bar?
Would you like to have a reliable helper always by your side?
Our website will come as an excellent solution to write my essay for everyone!

dissertation writing service
essay writing service
college paper writing service
buy essay
write my research paper

Essay Writing Service - EssayErudite.com

Our essay writing service provides a full-scale writing assistance accessible online 24/7.
Apart from many other writing companies, we are rather picky when forming a professional staff of experts.
Moreover, we try to make our every customer feel safe and pleased with the service.

narrative essay topics
essay writing service
research paper topics
write my thesis
essay help