Вы здесь: Главная » CSS » Виды 2-хколоночных макетов на основе свойства float

Виды 2-хколоночных макетов на основе свойства float

Двухколоночные макеты - это довольно распространенный вариант верстки сайтов, например, созданных на платформе WordPress.

Чаще всего (пока, во всяком случае), они верстаются на основе плавающих элементов, т.е. таких, которые имеют свойство float со значением left или right. Проблемой чаще всего выступает размер боковой колонки с таким css-правилом, т.к. он обычно бывает невелик и "не дотягивает" до низа сайта.

Чтобы сформировать колонки одинаковой высоты, есть несколько подходов. Рассмотрим их все на примерах. Но сначала договоримся об общей структуре сайта.

Традиционно 2-хколоночный макет состоит из шапки, основной части, разделенной на 2 неодинаковые части: котентную и боковую (сайдбар), и подвала. В HTML5 появились новые семантические теги, которые отвечают за определенные элементы страницы, которые ранее имели вид div-ов с id или классом.

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

Структура сайтаВ каждом из html-файлов примеров будет одна и та же структура в <body>:

Для того чтобы изначальное форматирование было одинаковым для всех примеров, также используем файл  base.css с такими правилами:

Этот файл (base.css) нужно подключить в блоке <head> с помощью тега <link> (все css-файлы будут у нас находится в папке css):

В файле, который в коде назван дополнительный.css и будет проводиться основное форматирование в виде 2-х колонок. Его название будет меняться в зависимости от способа форматирования колонок.

Пример 1. Использование свойства border-left или border-right

Для этого примера создадим в папке css файл border-right.css и запишем в нем следующий код:

Получился такой макет (открыть в новой вкладке):

Здесь есть свой подводный камень: если контента больше в блоке section, то все в порядке. А вот, если больше контента в aside - то длины серой колонки, формируемой за счет свойства border-right в section просто не хватит. Вторым подводным камнем является то, что размер border нельзя указать в %, только в px, pt или em. Попробуем избавиться от первого подводного камня в следующем примере.

Пример 2. Использование свойства border-left для родительского элемента и отрицательного margin для дочернего

Здесь тоже будем использовать свойство border для создания колонки. Но теперь назначим его для родительского элемента - div-а с id="wrapper":

В этом примере размер aside , т.е. свойство width совпадает с шириной свойства border-left для #wrapper.

Но этого недостаточно. Происходит сдвиг всего контента вправо за счет слишком большой границы в контейнере. Поэтому, чтобы компенсировать это, необходимо добавить для aside свойство margin-left: -14em, т.е. ровно столько, сколько использовалось для задания ширины.

И в этом случае уже не важно, в какой из частей сайта контента больше - в 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 - для правой. Еще нужно указать ширину обеих колонок.

Как видно из кода общая ширина составляет не 100%, а 99%. 1% в данном случае отведен на зазор между колонками. Если в этом нет необходимости, то ширину можно указывать в соотношении 25% для aside и 75% для section. Либо в любом другом соотношении (30% и 70%, 28% и 72% и т.п.). Также можно задавать фиксированную ширину, но в этом случае имеет смысл ограничить ширину контейнера (в нашем примере <div id="wrapper">).

Теперь нужно определиться с цветом колонок. Для этого используем линейный градиент с жестким переходом от одного цвета к другому:

Но вот беда - в таком виде мы градиента не увидим. А все потому, что наш <div id="wrapper">, т.е. элемент-контейнер для aside и section за счет того, что дочерним элементам мы назначили свойство float, "схлопнулся", т.е. имеет на данный момент нулевую высоту. Чтобы это исправить, можно использовать класс clearfix или обойтись свойством oferflow:hidden (auto):

Результат показан ниже (открыть в новой вкладке):

Пример 4. Использование свойств float:left  для боковой колонки и margin-left для основного контента

Рассмотрим способ, при котором для aside задается свойство float и width, а для section используется отступ в виде margin-left (margin-right), совпадающей по величине с шириной боковой колонки или несколько больше нее.

В коде разница между колонками составляет 20px - это дополнительный отступ, который улучшает читабельность текста. Но теперь нужно изменить цвет боковой колонки. Для этого воспользуемся способом "фальшивых колонок", предложенным  Дэном Седерхольмом. Нам понадобится небольшой высоты файл (например, 40-60px), в котором 250-260px будут залиты серым цветом, а все остальные - белым. Ширину файла можно подбирать, исходя из максимальной ширины современных мониторов (например, 2000px) или делать меньше, но не менее 260px - размер боковой колонки. В последнем случае обязательно указывать цвет фона в свойстве background:

Что получилось (открыть в новой вкладке):

В этом примере колонка фиксированной ширины. Давайте посмотрим, как сделать резиновые колонки.

Для этого значения ширины для aside и margin-left для section нужно указать в %:

А для фальшивой колонки нужно сделать изображение, в котором ширина блока, залитого серым, будет составлять 25% от общей ширины картинки. Итак, если ширина изображения 2000px, а 25% - 0.25 в относительных единицах, то ширина серого блока - 0.25*2000 = 500px.

А теперь используем это в свойстве background, указав свойство background-position: 25% top:

Наши резиновые колонки (открыть в новой вкладке и изменить размер браузера):

И последний вариант для задания цвета колонок - с помощью градиента:

Здесь конец одного цветового маркера и начало другого сходятся в 25%, что соответствует ширине aside.

Пример колонок с градиентом (открыть в новой вкладке и изменить размер браузера):

Скачать архив с исходниками примеров

онлайн Боги Египта 720 на андроид

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *