Идеальная 3-колоночная вёрстка средствами CSS
Самое правильное руководство по созданию трехколоночной верстки средствами CSS. Материал от нашего подписчика.
Пропустим ту часть, где я говорю, что меня зовут Рималь и то, что я увлекаюсь версткой дизайна для сайтов, а именно HTML & CSS.
Также пропустим ту часть, где я рассказываю, что у меня была мечта создать идеальный шаблон с 100 % адаптацией и кроссбраузерностью.
На просторах интернета я не нашел нормального объяснения о создании N-колоночных блоков сайта, всегда и везде был кривой и некрасивый код.
Данная статья более подойдет для новичков в веб-разработке, и я хочу поделиться им, ведь новички — это свежие умы, которые рано или поздно заменят старых нудных кодеров.
Наша цель — сделать трехколоночный сайт, блоки которого будут:
- Уменьшаться в зависимости от размера экрана (т.е. не будут уходить вниз);
- Растягиваться по всей ширине экрана (обычно это 2-х колоночный сайт);
- Адаптироваться при уменьшении заданных размеров.
Итак, приступим. Для того, чтобы сделать горизонтальные 3 колонки, мы будем использовать свойство display: inline-block. Да-да, свойство float уже не так актуально, но оно нам все же понадобится.
Прежде чем задать им свойства, создадим 3 блока, обернув их в классы main и inline:
left content right
Далее будет логично написать стили для этих классов, что мы и сделаем:
html, body .main < margin:0 auto; /* Центрируем блоки */ width:100%; /* Задаем ширину 100%, чтобы сделать ее резиновой */ max-width:700px; /* Устанавливаем максимальную ширину */ >.inline div < display:inline-block; /* Делаем блоки по горизонтали */ display: -moz-inline-stack; /* Для FireFox 2, тот же самый, что и inline-block */ vertical-align:top; /* Выравниваем их сверху */ font-size:16px; /* Ставим дочкам размер шрифта, иначе примет значение родителя */ /* Для IE 6 и IE 7, чтобы блоки были по горизонтали zoom: 1; *display: inline; */ >div.inline /* Ставим родителю значение 0, чтобы убрать отступы у блоков*/ .left-block < background:red; width:20%; /*Задаем ширину в процентах чтобы сделать ее резиновой*/ height:300px; /* Высота блока */ >.content < background:green; width:60%; height:300px; >.right-block
Размер окна больше 900px
Размер окна меньше 900px
Иногда нужно, чтобы дизайн сайта не сразу адаптировался под конкретные размеры, т.е. не исчезали какие-либо части сайта, а сохранялся весь функционал, просто с уменьшением их размера.
Для того, чтобы растянуть дизайн на всю ширину экрана, достаточно удалить свойство max-width:700px в классе main.
Чтобы дизайн полностью не уменьшался при малых размерах окна, а адаптировался, добавляем в стили @media запрос:
/* Простой пример @media запроса*/ @media (max-width:600px) < .inline div < display:block; /* Делаем блоки “Блочными”, т.е. друг под другом */ width:100%; /* Задаем на всю ширину экрана */ height:100px; >> Более подробно можно посмотреть на JS Fiddle — приветствуется любое изменение кода в лучшую его сторону.
За материал выражаем благодарность нашему подписчику, Рималю Сафарову.
Однако обратите внимание, что проще всего добиться такого результата средствами CSS Flexbox, о котором мы подробно рассказали в нашей статье.
Как сделать три колонки на css
Подскажите пожалуйста, как при помощи css сделать три горизонтальных колонки ? Две я сделал, а вот с центральной ни как разобраться не могу.
#column-1 < border: 1px solid #DDD; padding: 10px 10px; width: 48.6%; float: left; >#column-2 < >#column-3
Отслеживать
задан 29 дек 2012 в 18:04
Родион Поляков Родион Поляков
462 2 2 золотых знака 10 10 серебряных знаков 38 38 бронзовых знаков
2 ответа 2
Сортировка: Сброс на вариант по умолчанию
Вот Вам пример резинового макета — http://jsfiddle.net/Alex83/5rpJN/6/
body, html < width: 100%; height: 100%; >#column-1 < width: 20%; background: red; float: left; min-height: 100%; >#column-2 < background: green; width: 60%; min-height: 100%; float: left; >#column-3
left center rightСпрашивайте, если вдруг не понятно.
А вот Вам еще в догонку фиксированный макет — http://jsfiddle.net/Alex83/4UtDc/4/
body, html < width: 100%; height: 100%; >.wrapper < width: 300px; height: 100%; margin: 0 auto; background: red; >#column-1, #column-2, #column-3 < float: left; min-height: 100%; >#column-1 < width: 50px; background: red; >#column-2 < width: 200px; background: green; >#column-3
left center right Отслеживать
1,548 8 8 серебряных знаков 16 16 бронзовых знаков
ответ дан 29 дек 2012 в 18:43
2,833 3 3 золотых знака 24 24 серебряных знака 44 44 бронзовых знака
Да, кстати, не забывайте учитывать, что если вы будете задавать такие свойства как padding и border, то и размер блоков, для которых эти правила были заданы, будет увеличен. если нужно, чтобы размер не менялся, то учитывайте это в коде. например, нам нужно чтобы блок был шириной и высотой в 100px; напишем такой код: div < width: 100px; height: 100px; padding: 10px; border: 10px; >Ширина и высота блока в данном случае = 140px; Для того, чтобы этого избежать, уменьшаем размер блока на 40px; или используем свойство css3 box-sizing: border-box; Удачи
Макет в 3 колонки
Здесь вы узнаете, как сделать 3-х колоночный макет сетки при помощи CSS.
Колонка 1
Колонка 2
Колонка 3
Как сделать макет в 3 колонки
Шаг 1) Добавляем HTML:
Шаг 2) Добавляем CSS:
Здесь мы создаем три одинаковые колонки:
.column < float: left; width: 33.33%; >/* Сбрасываем обтекание после колонок */ .row:after
Здесь мы создаем три колонки разной ширины:
.column < float: left; >.left, .right < width: 25%; >.middle
Здесь мы добавляем колонкам адаптивность:
/* Адаптивный макет – когда ширина экрана меньше 600px, колонки будут отображаться друг над другом, а не рядом друг с другом */ @media screen and (max-width: 600px) < .column < width: 100%; >>
Трехколоночный макет на CSS с одинаковой высотой колонок
Представляю Вашему вниманию еще один 3-хколоночный макет страницы, реализованный с помощью XHTML и CSS. Вот так он выглядит в миниатюре:
- Оба сайдбара (левая и правая колонки) расположены с правой стороны. Такой тип страницы сейчас очень популярен, он используется на многих блогах.
- HTML-код основной колонки расположен до начала кода обоих сайдбаров.
- Все 3 колонки визуально растягиваются одинаково по вертикали при увеличении высоты одной из них. При этом не используются изображения.
- Универсальность — макет можно использоваться как в случае с фиксированной шириной страницы, так и в случае с «резиновой» шириной. Для этого необходимо применить соответствующие CSS-свойства у 3-х блоков (в примере есть комментарии).
- Кроссбраузерность проверена в основных популярных браузерах: Opera 9.23, FireFox 2.0, IE 6, IE 7, Safari/Win.
- Валидный XHTML, валидный CSS.
HTML-код
Основа макета выглядит следующим образом:
В связи с тем, что в «резиновом» варианте в Internet Explorer 7 наблюдался небольшой отступ справа от правой колонки, пришлось задействовать дополнительный контейнер #wrpr . При фиксированной верстке данный контейнер не нужен.CSS-код
Здесь публикую только код, отвечающий за расположение и визуализацию колонок. Все остальное в примере.
#wrapper < /* для фиксированной ширины */ width: 900px; margin: 0 auto; /* для "резиновой" ширины width: expression((documentElement.clientWidth||document.body.clientWidth)<995?'1000px':''); min-width: 1000px; */ >#container < width: 100%; background: #D5FFD5; /* фон основной колонки */ >* html #container #container:after < /* закрываем плавающие блоки */ content: '.'; display: block; clear: both; visibility: hidden; height: 0; line-height: 0; >#sub-container < float: left; border-right: 200px solid #BFF2FF; /* фон правого сайдбара */ /* для фиксированной ширины */ width: 700px; /* для "резиновой" ширины width: 100%; margin-left: -200px; */ >#wrpr < /* для "резиновой" ширины margin-left: 200px; */ >#content < width: 100%; float: left; >#text < border-right: 200px solid #FFF2BF; /* фон левого сайдбара */ >#left < float: left; width: 200px; margin-left: -200px; background: #FFF2BF; /* фон левого сайдбара */ position: relative; >#right < float: left; width: 200px; margin-left: -400px; background: #BFF2FF; /* фон правого сайдбара */ border-left: 200px solid #FFF2BF; /* фон левого сайдбара */ >Пример
Смотрим готовый пример страницы, сверстанной описанным методом.
Для удобства можно скачать архив с примером универсальной трехколоночной страницы на CSS.
Смотрите также
10 фиксов, решающих проблемы Internet Explorer 6
Данный пост основан на переводе интересной англоязычной статьи «10 Fixes That Solve IE6 Problems». Информация, изложенная ниже, будет полезна как начинающим верстальщикам, там и бывалым. Зеленым цветом я пометил пункты, содержимое которых полностью .
Верстаем кроссбраузерный «резиновый» макет страницы
Как вы уже могли заметить, страницы моего блога некоторое время назад стали «резиновыми». Довольно нетривиальная для меня, скажу я вам, ситуация, с которой, на мой взгляд, я справился лишь на четверку. Поэтому пишу данный пост с целью .
Избавляемся о ошибок xHTML-валидации при использовании JavaScript, Flash, , CSS
Я являюсь сторонником веб-стандартов, но, к сожалению, по тем или иным причинам не всегда их соблюдаю (кстати сказать, когда я верстал таблицами, то о стандартах и понятия не имел :). Как вы наверняка уже знаете, в настоящее время в Рунете проходит конкурс сайтов .
5 советов верстальщику
Лучше поздно, чем никогда. Наконец-то я готов представить свои пять советов в рамках эстафеты, запущенной Никитой, тем более что «пинок» получил от трех человек. 1) Читайте блоги специалистов в данной сфере. Хотя уже и не так .
Комментарии (24)
Оба сайдбара (левая и правая колонки) расположены с правой стороны.
Звучит дико 🙂
Лично я против использования раскраски через border. По эстетическим причинам и по причинам проблемного редизайна таких макетов.делать раскраску блоков рамкой это жесть)) согласен, зачем так мучиться чтобы сделать каркас страницы на дивах мне непонятно, что мешает сделать каркас таблицей?
Да простит их гуру вёрстки, ибо не ведуют дети, что лепечут 🙂
А способ реальный. Сам его давно юзаю. Есть другое решение: использовать бэкграунд для родителя, который уже 100% в высоту (например body). Но способ с бордерами мне, лично, больше нравицо. Во первых не нужен лишний файл-бэкграунд. Во-вторых, кошерней смотрицо в режиме «без графики».
Пример, где я использовал: laysa.ruНе вижу ничего проблемного в редизайне макетов такого типа.
Я, конечно, тоже поддерживаю мысль, что, по сути, использование бордера как места под колонку нелогично и вообще (действительно) дико. Но на практике мы действительно имеем проблему с кроссбраузерной версткой трехколоночной страницы. Те же отрицательные отступы аналогично должны быть названы «дикими». Поэтому, пусть каждый для себя решает, что он будет использовать в жизни. Я думаю и этот способ имеет право на жизнь если он реально работает. А вам, Dimox, спасибо за хорошо описанный вариант.
Я, конечно, понимаю нелогичность такого метода разметки. Но дивовая верстка не дает возможность использовать такие же средства представления страницы, как с помощью таблиц (виной все та же пресловутая кроссбраузерность), например, вытягивание на вcю высоту экрана, поэтому, используя дивы приходится применять различные трюки, чтобы получить нужный эффект. ИМХО, с CSS2 это неизбежно. И в этом нет ничего страшного. ASh, пожалуйста ;).
Это конечно оригенально, но я не думаю, что подобный макет подойдет не под любой контект. Поэтому массово использовать я бы его не советовало, да и трудности с ним будут, но если ваш контент идеально вписывается в такой расклад, то почему бы и нет!