Добавление margin для создания двухколонного макета

Опять воспользуемся свойством float, чтобы расположить колонки рядом, но добавим его только для первого слоя. При этом в стиле второго слоя следует установить свойство margin-left, значение которого равно ширине левой колонки. Но здесь есть одна хитрость — ширину правой колонки задавать нельзя, потому что это приведет к переносу блоков в браузере Internet Explorer при уменьшении окна браузера. А именно этого мы стараемся избежать. Поэтому общую ширину макета установим с помощью еще одного слоя, назовем его container, а остальные слои будут располагаться внутри него (пример 2). В этом случае ширину правой колонки можно не задавать, поскольку она будет занимать все доступное пространство.

Пример 2. Двухколонный макет

Две колонки #container { width: 750px; /* Общая ширина колонок */ } #leftcol { /* Левая колонка*/ width: 200px; /* Ширина слоя */ float: left; /* Состыковка с соседним слоем */ color: white; /* Цвет текста*/ background: #008000; /* Цвет фона левой колонки */ } #rightcol { /* Правая колонка*/ background: #e0e0e0; /* Цвет фона правой колонки */ margin-left: 200px; /* Отступ слева */ } p { padding: 10px; /* Поля вокруг текста */ margin: 0; /* Убираем отступы */ }

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

Если внизу после колонок предполагается разместить еще один слой, то для него следует использовать стилевое свойство clear. Дело в том, что браузеры по-разному располагают этот нижележащий слой, поэтому следует отменить действие обтекания, что clear как раз и делает (пример 3).

Пример 3. Применение свойства clear

Две колонки … … …

Стиль для данного примера останется неизменным и только добавляется тег с атрибутом style=clear: left. Значение свойства clear обычно совпадает со значением float.

Резюме

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

Такой способ создания многоколонного макета имеет и определенный недостаток, который проявляется в том, что при уменьшении окна браузера до определенной величины, колонки «перепрыгивают» одна под другую. Чтобы этого избежать дополнительно используют стилевое свойство margin-left, добавляя его к правой колонке. В таком случае слои остаются на своих исходных местах, независимо от размеров окна браузера.

как сделать отступ текста и картинки margin, padding в html документе


Читать еще…

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