Верстка блоками DIV. С самого начала

Верстка блоками div давно уже стала стандартом и имеет ряд преимуществ перед табличной версткой. Однако на деле начинающие разработчики путаются в поведении этих самых блоков.

Давайте разберем основные моменты при блочной верстке. Сейчас мы не будем брать во внимание стандарт html5, а просто рассмотрим основу основ при верстке блоками div, которая используется при создании макета или же какого то отдельного компонента страницы.

Что считать блочным элементом?

Область такого элемента на странице представлена прямоугольником, по умолчанию занимает все доступную ширину и начинается с новой строки.
Самым распространённым элементом, используемым в блочной верстке, является универсальный элемент <div>.

Итак, от простого к сложному. Посмотрим, как отобразятся блоки div по умолчанию без стилей, влияющих на их положение. Для наглядности стили к элементам будем добавлять инлайново, через атрибут style.

<div style="background: #CCA69E;">Блок 1</div>
<div style="background: #FF9282;"> Блок 2</div>
<div style="background: #8ED9B6;"> Блок 3</div>

Добавим значение ширины для каждого блока:

<div style="background: #CCA69E; width: 200px;">Блок 1</div>
<div style="background: #FF9282; width: 150px;"> Блок 2</div>
<div style="background: #8ED9B6; width: 100px;"> Блок 3</div>

Видно, что каждый блок согласно спецификации располагается с новой строки. Это их нормальное поведение.

Теперь возникает вопрос, как расположить блоки div на одной строке, друг за другом?

Для этого существует свойство float, которое определяет, с какой стороны блок будет принудительно выровнен. При этом с другого края, он может обтекаться другими элементами.

Свойство float имеет следующие значения:

• left – блок выравнивается по левому краю, обтекание справа
• right – блок выравнивается по правому краю, обтекание слева
• none – обтекание не задано, блок ведет себя по умолчанию, как в предыдущих примерах.

Добавим float:left к нашим блокам, чтобы блоки выровнялись по левому краю:

<div style="background: #CCA69E; float: left; width: 200px;">Блок 1</div>
<div style="background: #FF9282; float: left; width: 150px;"> Блок 2</div>
<div style="background: #8ED9B6; float: left; width: 100px;"> Блок 3</div>

В результате, блоки выстроились на одной строке. Хорошо, допустим, мы захотели добавить еще один div снизу, и сделаем это без указания свойства float:

<div style="background: #CCA69E; float: left; width: 200px;">Блок 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>
<div style="background: #FF9282; float: left; width: 150px;"> Блок 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>
<div style="background: #8ED9B6; float: left; width: 100px;"> Блок 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>
<div style="background: #01A99D; width: 450px;">Блок 4. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>

Видно, что блок добавился как то криво. Кажется, что он добавился с новой строки под Блок 1. На самом деле, Блок 4 занимает место от начала Блока 1 и на 450 пикселов вправа. Вот посмотрите:

Почему так вышло? Вкратце, так происходит, потому что элементы с float выпадают из потока документа. Однако, это тема отдельной статьи. Здесь же мы познакомимся с новым свойством clear, которое управляет поведением плавающих элементов:

• left – запрещает обтекание с левой стороны, все элементы будут показаны с новой строки (под элементом)
• rigth – запрещает обтекание элемента с правой стороны
• both – запрещает обтекание элемента с обоих сторон, рекомендуется использовать, когда явно надо показать элемент с новой строки или неизвестно с какой именно стороны возможно обтекание другими элементами

Добавим Блоку 4 свойство clear:left, которое запретит этому элементу обтекание других плавающих элементов с левой стороны.

<div style="background: #CCA69E; float: left; width: 200px;">Блок 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>
<div style="background: #FF9282; float: left; width: 150px;">Блок 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>
<div style="background: #8ED9B6; float: left; width: 100px;">Блок 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>
<div style="background: #01A99D; width: 450px; clear: left;">Блок 4. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>

Блок 4 разместился с новой строки, как нам надо.

В данном случае мы знаем как располагаются другие блоки, потому в примере сразу указали clear:left. Бывают ситуации, когда мы точно не знаем, с какой стороны встретится плавающий блок, поэтому в таких случаях стоит указывать clear:both, отменяющий обтекание с обеих сторон. Теперь мы разобрались как расположить блоки div на одной строке горизонтально.

Следует помнить, что блоки со значением float располагаются на одной строке, если позволяет ширина родительского элемента. Если блочные элементы не умещаются в ряд, они будут переноситься на новую строку. Если это критично, например, при верстке макетов, нужно это учитывать и у блоков с float обязательно задавать ширину – фиксированную (px) или резиновую (%, rem и т.д.). Дальше посмотрим на такие ситуации.

Как повлиять на блоки, если мы хотим разместить эти блоки по центру?

Классическим решением будет добавление блокам родителя и использование свойства margin: 0 auto;

Почему собственно родителю мы дали класс .wrapper ? «wrapper» в переводе означает «обертка». Это некая общепризнанная практика, определяющая название класса, когда элемент оборачивает другие блоки и тем самым позволяет управлять/влиять на них посредством изменения самого родителя.

Возьмем разметку из предыдущих примеров и усовершенствуем её.

<div class="wrapper" style="margin: 0 auto; width: 450px;">
<div style="background: #CCA69E; float: left; width: 200px;">Блок 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>
<div style="background: #FF9282; float: left; width: 150px;">Блок 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>
<div style="background: #8ED9B6; float: left; width: 100px;">Блок 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>
<div style="background: #01A99D; width: 450px; clear: left;">Блок 4. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>

Здесь вроде всё просто.

А если нам не нравится, что текст вплотную прилипает к краю родительского блока и хотим добавить поля без внесения изменений в разметку, только с помощью css. Добавим элементам свойство padding:

И видим, что наша верстка рассыпалась! Блок 3 куда то уехал. Почему так вышло? Ответ прост. Добавив поля элементам мы увеличили их ширину. Теперь значения таковы:

Блок 1: 10 + 200 + 10 = 220px

Блок 2: 10 + 150 + 10 = 170px

Блок 3: 10 + 100 + 10 = 120px

Блок 4: 10 + 450 + 10 = 470px

220 + 170 + 120 = 510px

Общая ширина трех блоков 510, они не умещаются в ширину родителя (450) и потому переносятся на новую строку.

Как поправить? Можно сделать следующее:

1. Задать заново значения ширины для каждого блока с учетом полей. Уменьшив размеры блоков. Все снова аккуратно встанет в одну строку. Согласитесь, это неудобно? Каждый раз лезть в верстку и что-то править.
2. Использовать свойство box-sizing: border-box. Чтобы расчет брался из общей ширины блока. Советую узнать, что такое блоковая модель сss.

Используем второй вариант, получается так:

<div class="wrapper" style="margin: 0 auto; width: 450px; background: #f0f0f0;">
<div style="background: #CCA69E; float: left; width: 200px; padding: 10px; box-sizing: border-box;">Блок 1. Lorem</div>
<div style="background: #FF9282; float: left; width: 150px; padding: 10px; box-sizing: border-box;">Блок 2. Lorem ipsum</div>
<div style="background: #8ED9B6; float: left; width: 100px; padding: 10px; box-sizing: border-box;">Блок 3. Lorem ipsum</div>
<div style="background: #01A99D; width: 450px; clear: left; box-sizing: border-box; padding: 10px;">Блок 4. Lorem</div>
</div>

Теперь соберём всю полученную информацию воедино и попробуем создать простенький типовой трёхколоночный макет с резиновой версткой, который будет растягиваться максимально до 900px, после чего весь макет будет позиционироваться по центру.

Создаем  разметку макета:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div class="header">
        Шапка сайта
    </div>
    
    <div class="left-sidebar">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. In itaque dolor vitae praesentium consectetur molestias consequatur voluptatem rem dolore nihil officiis voluptates aperiam asperiores, saepe iure repudiandae expedita natus eaque magnam tempore delectus.
    </div>
    <div class="content">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit rem fugit itaque, est impedit aperiam a autem repellat vitae porro ex expedita, cumque nulla, velit. Soluta velit eos, quia. Fugiat voluptates nisi aliquid eum sapiente sunt nobis, adipisci assumenda earum!
    </div>
    <div class="right-sidebar">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. In itaque dolor vitae praesentium consectetur molestias consequatur voluptatem rem dolore nihil officiis voluptates aperiam asperiores, saepe iure repudiandae expedita natus eaque magnam tempore delectus.
    </div>
    
    <div class="footer">
        Подвал
    </div>
</body>
</html>

Пишем стили:

body {
    max-width: 900px; /* ограничение максимальной ширины  */
    margin: 0 auto;
}

/* для всех блоков внутри body изменяем алгоритм расчета ширины блоков и добавляем все блокам поля 10px */
body div {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 10px;
}

.header {
    background: #CCA69E;
    padding: 10px;
}

.left-sidebar {
    width: 20%;
    background: #8ED9B6;
    float: left;
}

.content {
    float: left;
    width: 60%;    
}

.right-sidebar {
    width: 20%;
    background: #FF9282;
    float: left;
}

.footer {
    background: #000;
    clear: both; /* запрещаем обтекание с обоих сторон, блок выводится с новой строки */
    color: #ccc;
}

Посмотреть пример.

Если что-то непонятно — спрашивайте в комментариях.