Размещение трех блоков (колонок) на странице сайта

Начинающие вебмастера, изучающие блочную верстку, часто сталкиваются с проблемой размещения на странице трех колонок по горизонтали. Известно ведь, что колонка, как и подобает обыкновенному блочному элементу, по-умолчанию будет находиться на воображаемой строке лишь в одном единственном экземпляре. Другой блок (читай — колонка) будет размешаться под первой внизу. Так уж устроен мир.

Известно также, что для решения данной задачи предусмотрено специальное правило, задающее «обтекание», или иначе — float. Ну, хорошо, давайте возьмем следующую схему и попробуем применить к ней это полезное правило:

Голубой рамкой схематично обозначен общий контейнер, в котором у нас должны разместиться на одной горизонтальной линии три одинаковых блока с номерами 1, 2, 3. В листе стилей CSS мы первому блоку зададим такое правило:

#1 {float: left;}

Блоку номер 3 такое правило:

#3 {float: right;}

Но что нам делать с блоком номер 2? Какое правило задать ему: левое или правое «обтекание»?

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

К примеру, если это блоки из текста, но в каждом из них этого текста разное количество. Тогда возможна ситуация, когда один блок как бы «подлезает» под другой.

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

Следует упростить задачу. Если у нас будет всего лишь два блока, то и вопрос отпадет сам собой. А как из трех сделать два? Правильно! Нужно два из них объединить в один.

Следующая картинка наглядно поясняет суть этого действа:

То есть, необходимо в коде страницы добавить еще один блок, в который войдут блоки 1 и 2. Назовем его, к примеру, subcontainer.

Тогда в листе стилей CSS нам останется только прописать правила для этого нового блока, задав ему float: left; Внутри же него 1-й блок будет иметь все то же правило float: left;, а блок номер 2 — float: right;

Для наглядности приведу пример кода страницы и кусок листа стилей CSS:

<div id="container">
<div id="subcontainer">
<div id="1">Содержимое блока 1</div>
<div id="2">Содержимое блока 2</div>
</div>
<div id="3">Содержимое блока 3</div>
</div>

#subcontainer {float: left;}
#1 {float: left;}
#2 {float: right;}
#3 {float: right;}

UPD от 30.10.2018: Все это, братцы, сильно устаревший подход. Сегодня никто уже так не морочится. Вебмастера применяют в полной мере Flexbox для выравнивания нескольких элементов на странице. Изучите его, и будет вам Счастье!

Удачи!

Автор: Игорь Квентор
www.websovet.com