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

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

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

threeblocks1.gif

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

#1 {float: left;}

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

#3 {float: right;}

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

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

threeblocks2.gif

То есть, необходимо в коде страницы добавить еще один блок, в который войдут блоки 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;}

30.07.2009

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

Если статья оказалась для вас полезной, пожалуйста, поставьте свою оценку и поделитесь в соцсетях:

1 Star2 Stars3 Stars4 Stars5 Stars (Вы еще не оценили)
Загрузка...

Похожие записи:

Подпишитесь на рассылку блога Вебсовет, чтобы первыми получать самые интересные материалы:

3 комментария

  1. Иван

    05.02.2015

    Очень интересное решение. Спасибо!

  2. Олег
    http://www.joomlatown.net/
    04.07.2015

    Ваш код так не сработает.
    В html указан class, а в CSS стили указаны для ID
    Исправьте.

    P.S.: селекторы должны начинаться со строчной латинской буквы — это как правило хорошего тона.

  3. Игорь Квентор
    http://www.websovet.com/
    07.07.2015

    Спасибо, что заметили ошибку! :) Да, селекторы принято начинать со строчной буквы, но в примере даны цифры для наглядности.

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