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

!!!

При использовании свойства float следует помнить о нескольких вещах:
— флоатные элементы должны знать, какую ширину им следует занимать;
— блок-контейнер, содержащий флоатные блоки, имеет свойство схлопываться, так как они выпадают из потока;
— для нижележащих нефлоатных элементов следует сбрасывать обтекание.

Сайдбар справа

Исходная разметка

Нефиксированная ширина

В этом варианте ширина обоих блоков задается в процентах от блока content, который в свою очередь занимает 100% ширины блока-обертки wrapper. Для wrapper при необходимости можно задать максимальную ширину, больше которой он не будет растягиваться.

Пояснения

Свойство box-sizing:border-box задается для того, чтобы впоследствии можно было спокойно задавать маргины и паддинги внутри блока, не влияя на его установленную ширину.
Overflow:hidden для блока content позволяет избежать схлопывания при выпадении из потока флоатных блоков.
Clear:both отменяет обтекание и позволяет футеру растянуться на всю ширину сайта.

Фиксированная ширина

Если для сайдбара задана фиксированная ширина, возникает вопрос, как указать резиновому блоку main пределы растягивания. Воспользуемся для этого функцией calc.

Пояснения

Функция calc позволяет вычислить ширину резинового блока main, отнимая от общей резиновой ширины, какой бы она ни была в данный момент, фиксированный размер сайдбара.

Сайдбар слева

В целом, задача по размещению сайдбара слева решается аналогично. В исходной разметке меняем местами блоки main и sidebar:

В стилях меняет float:left на float:right и наоборот.

Нефиксированная ширина

Фиксированная ширина

Этот макет может быть реализован двумя способами:
1)вычисление ширины блока main с помощью уже знакомой нам функции calc:

2)заданием для блока main левого маргина без использования свойства float:

Пояснения

При этом блок main остается в потоке документа и обтекает сайдбар. Для того, чтобы не допустить обтекания снизу и сохранить главный блок в виде колонки, ему задается левый маргин.

Приоритет контента

Расположение основного контента ниже сайдбара в разметке — не очень хорошо с точки зрения приоритета (контент все же главнее, а значит, должен быть выше). Если учитывать этот фактор, появляется вопрос: как же реализовать левый сайдбар с такой разметкой:

Нефиксированная ширина

При процентном задании ширины не возникает никаких проблем, нужно лишь задать блокам правильные флоаты:

Фиксированная ширина

А здесь нам снова поможет функция calc:

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

Пояснения

За счет того, что main выпадает из потока, прижимаясь к правой границе родительского блока, у сайдбара появляется возможность подняться вверх и прижаться к нему слева. Чтобы освободить место для бокового блока задаем отрицательный маргин. В итоге, наши блоки расположены так, как нужно, однако возникают проблемы с прокруткой страницы, так как при сужении экрана главных контент выходит за правую границу на те самые 275 пикселов.


Вам будет интересно:

Вертикальное выравнивание блоков в CSS
Как прижать футер к низу страницы с помощью CSS

0 комментариев

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

*Доступные HTML-теги: a, abbr, blockquote, code, pre, del, i, em, strong, b, strike
*Не будет опубликован