Двухколоночные макеты - это довольно распространенный вариант верстки сайтов, например, созданных на платформе WordPress.
Чаще всего (пока, во всяком случае), они верстаются на основе плавающих элементов, т.е. таких, которые имеют свойство float со значением left или right. Проблемой чаще всего выступает размер боковой колонки с таким css-правилом, т.к. он обычно бывает невелик и "не дотягивает" до низа сайта.
Чтобы сформировать колонки одинаковой высоты, есть несколько подходов. Рассмотрим их все на примерах. Но сначала договоримся об общей структуре сайта.
Традиционно 2-хколоночный макет состоит из шапки, основной части, разделенной на 2 неодинаковые части: котентную и боковую (сайдбар), и подвала. В HTML5 появились новые семантические теги, которые отвечают за определенные элементы страницы, которые ранее имели вид div-ов с id или классом.
На рисунке ниже изображена очень упрощенная структура сайта, в которой перечислены основные блоки, которые будут в дальнейшем использованы в макетах.
В каждом из html-файлов примеров будет одна и та же структура в <body>:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 | <header> <h1>European cities</h1> </header> <div id="wrapper"> <aside> <nav> <ul> <li><a href="#">London</a></li> <li><a href="#">Paris</a></li> <li><a href="#">Madrid</a></li> <li><a href="#">Berlin</a></li> </ul> </nav> </aside> <section> <article> <h2>London</h2> <p> London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants. </p> <p> Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium. </p> <p> The central part of London is full of historical remains. Nearly every building, every bridge, ... </p> </article> <article> <h2>The Best things of London</h2> <p> One of the largest and the most commercially successful cities in the world, London is also regarded as the financial heart of the United Kingdom. ... it is a perfect tourism magnet. </p> <p> If royalty fails to entice you, the numerous catacombs of the creepy London Dungeon or the wax images of stars in the Madame Tussaud’s Museum will surely do the trick. ... </p> </article> ... </section> </div> <!-- end #wrapper--> <footer> Copyright ©http://somesite.com </footer> |
Для того чтобы изначальное форматирование было одинаковым для всех примеров, также используем файл base.css с такими правилами:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | * {box-sizing: border-box;} body { font: 16px Tahoma, Arial sans-serif; color: #222; padding: 0; } header, footer { background: #000; padding: 10px; text-align: center; color: #fff; } footer { clear: both; } aside, section { padding: 10px; } nav ul { list-style-type: none; padding: 0; margin: 10px 0; } nav ul li { padding: 5px; padding-left: 15px; border-bottom: 1px dotted #333; } nav ul li a { display: block; color: #333; text-decoration: none; } nav ul li a:hover { color: #666; text-decoration: underline; } |
Этот файл (base.css) нужно подключить в блоке <head> с помощью тега <link> (все css-файлы будут у нас находится в папке css):
| 1 2 3 4 5 6 | <head> <meta charset="UTF-8"> <title>Название страницы</title> <link rel="stylesheet" href="css/base.css"> <link rel="stylesheet" href="css/дополнительный.css"> </head> |
В файле, который в коде назван дополнительный.css и будет проводиться основное форматирование в виде 2-х колонок. Его название будет меняться в зависимости от способа форматирования колонок.
Пример 1. Использование свойства border-left или border-right
Для этого примера создадим в папке css файл border-right.css и запишем в нем следующий код:
| 1 2 3 4 5 6 7 8 | aside { width:250px; float: right; } section { border-right: 250px solid #aaa; } |
Получился такой макет (открыть в новой вкладке):
Здесь есть свой подводный камень: если контента больше в блоке section, то все в порядке. А вот, если больше контента в aside - то длины серой колонки, формируемой за счет свойства border-right в section просто не хватит. Вторым подводным камнем является то, что размер border нельзя указать в %, только в px, pt или em. Попробуем избавиться от первого подводного камня в следующем примере.
Пример 2. Использование свойства border-left для родительского элемента и отрицательного margin для дочернего
Здесь тоже будем использовать свойство border для создания колонки. Но теперь назначим его для родительского элемента - div-а с id="wrapper":
| 1 2 3 4 5 6 7 | aside { width: 14em; float: left; } #wrapper { border-left: 14em solid #ccc; } |
В этом примере размер aside , т.е. свойство width совпадает с шириной свойства border-left для #wrapper.
Но этого недостаточно. Происходит сдвиг всего контента вправо за счет слишком большой границы в контейнере. Поэтому, чтобы компенсировать это, необходимо добавить для aside свойство margin-left: -14em, т.е. ровно столько, сколько использовалось для задания ширины.
| 1 2 3 4 5 6 7 8 | aside { width: 14em; float: left; margin-left: -14em; } #wrapper { border-left: 14em solid #ccc; } |
И в этом случае уже не важно, в какой из частей сайта контента больше - в section или aside - контейнер растянется по размеру большего из них. Соответственно, его граница, т.е. свойство border-left, тоже растянется.
P.S. Вы можете использовать в том числе и свойство border-right, но для aside задавать правила float: right и margin-right соответственно. Ширина в em в какой-то мере делает верстку более гибкой, т.к. зависит от размера шрифта.
Смотрим на результат (открыть в новой вкладке):
Пример 3. Использование свойств float:left и float:right для section и aside
Чтобы расположить 2 колонки соответственно слева и справа, можно воспользоваться только свойством float, но с разными значениями: left для левой колонки и right - для правой. Еще нужно указать ширину обеих колонок.
| 1 2 3 4 5 6 7 8 | aside { width: 25%; float: left; } section { width: 74%; float:right; } |
Как видно из кода общая ширина составляет не 100%, а 99%. 1% в данном случае отведен на зазор между колонками. Если в этом нет необходимости, то ширину можно указывать в соотношении 25% для aside и 75% для section. Либо в любом другом соотношении (30% и 70%, 28% и 72% и т.п.). Также можно задавать фиксированную ширину, но в этом случае имеет смысл ограничить ширину контейнера (в нашем примере <div id="wrapper">).
Теперь нужно определиться с цветом колонок. Для этого используем линейный градиент с жестким переходом от одного цвета к другому:
| 1 2 3 | #wrapper { background: linear-gradient(to right, #8fa8cb 26%, #fff 26%); } |
Но вот беда - в таком виде мы градиента не увидим. А все потому, что наш <div id="wrapper">, т.е. элемент-контейнер для aside и section за счет того, что дочерним элементам мы назначили свойство float, "схлопнулся", т.е. имеет на данный момент нулевую высоту. Чтобы это исправить, можно использовать класс clearfix или обойтись свойством oferflow:hidden (auto):
| 1 2 3 4 | #wrapper { overflow: hidden; background: linear-gradient(to right, #8fa8cb 26%, #fff 26%); } |
Результат показан ниже (открыть в новой вкладке):
Пример 4. Использование свойств float:left для боковой колонки и margin-left для основного контента
Рассмотрим способ, при котором для aside задается свойство float и width, а для section используется отступ в виде margin-left (margin-right), совпадающей по величине с шириной боковой колонки или несколько больше нее.
| 1 2 3 4 5 6 7 | aside { width: 250px; float: left; } section { margin-left: 270px; } |
В коде разница между колонками составляет 20px - это дополнительный отступ, который улучшает читабельность текста. Но теперь нужно изменить цвет боковой колонки. Для этого воспользуемся способом "фальшивых колонок", предложенным Дэном Седерхольмом. Нам понадобится небольшой высоты файл (например, 40-60px), в котором 250-260px будут залиты серым цветом, а все остальные - белым. Ширину файла можно подбирать, исходя из максимальной ширины современных мониторов (например, 2000px) или делать меньше, но не менее 260px - размер боковой колонки. В последнем случае обязательно указывать цвет фона в свойстве background:
| 1 2 3 | #wrapper { background: url(../images/col-bg-fixed.jpg) repeat-y #fff; } |
Что получилось (открыть в новой вкладке):
В этом примере колонка фиксированной ширины. Давайте посмотрим, как сделать резиновые колонки.
Для этого значения ширины для aside и margin-left для section нужно указать в %:
| 1 2 3 4 5 6 7 | aside { width: 25%; float: left; } section { margin-left: 25%; } |
А для фальшивой колонки нужно сделать изображение, в котором ширина блока, залитого серым, будет составлять 25% от общей ширины картинки. Итак, если ширина изображения 2000px, а 25% - 0.25 в относительных единицах, то ширина серого блока - 0.25*2000 = 500px.
А теперь используем это в свойстве background, указав свойство background-position: 25% top:
| 1 2 3 | #wrapper { background: url(../images/col-bg-fluid-500px.jpg) repeat-y 25% top #fff; } |
Наши резиновые колонки (открыть в новой вкладке и изменить размер браузера):
И последний вариант для задания цвета колонок - с помощью градиента:
| 1 2 3 | #wrapper { background: linear-gradient(to right, #cde 25%, #fff 25%); } |
Здесь конец одного цветового маркера и начало другого сходятся в 25%, что соответствует ширине aside.
Пример колонок с градиентом (открыть в новой вкладке и изменить размер браузера):
