При создании трех колонок применяются те же принципы, что и при верстке двухколонного макета. Используемые приемы можно условно поделить на две части по параметрам CSS, с помощью которых осуществляется построение модульной сетки. В первом случае это параметр float, который позволяет размещать слои рядом друг с другом по горизонтали. Второй подход ? воспользоваться набором стилевых атрибутов, связанных с позиционированием слоев. Рассуждать о том, какой метод лучше неправомерно, видимый результат все равно будет один, но каждый подход имеет свои особенности.
1. Использование параметра float
Параметр float позволяет делать обтекание элемента. Значение left выравнивает слой по левому краю, а все последующие элементы ? текст, изображения или другие слои, размещаются по его правой стороне. Аргумент right действует с точностью наоборот, выравнивая слой по правому краю и заставляя присоединяться к нему другие слои по левому краю. Свойство присоединения элементов между собой по горизонтали как раз и требуется, ведь слои по умолчанию размещаются по вертикали друг под другом.

На рис. 1 показан макет, созданный с использованием параметра float и восьми слоев. Шесть слоев хорошо видны на рисунке как цветные прямоугольники с рамкой, а еще два необходимо, чтобы отделить слои с заголовками от содержания (пример 1).

#title1, #title2, #title3, #col1, #col2, #col3 { /* 1 */
font-family: Verdana, Arial, sans-serif; /* Рубленый шрифт */
font-weight: bold; /* Жирное начертание текста заголовка */
font-size: 80%; /* Размер шрифта */
color: white; /* Цвет текста заголовка */
width: 200px; /* Ширина колонок */
padding: 5px; /* Поля вокруг текста */
border: 1px solid black; /* Рамка вокруг слоя */
margin-left: 5px; /* Отступ слева */
margin-top: 2px; /* Отступ сверху */
float: left; /* Состыковка колонок по горизонтали */
}

#col1, #col2, #col3 { /* 2 */
font-family: «Times New Roman», Times, serif; /* Шрифт с засечками */
font-size: 100%; /* Размер шрифта */
font-weight: normal; /* Нормальное начертание */
color: black; /* Цвет текста */
}

/* Цвет фона каждого слоя */
#title1 { background: #B38541 }
#title2 { background: #008159 }
#title3 { background: #006077 }
#col1 { background: #EBE0C5 }
#col2 { background: #BBE1C4 }
#col3 { background: #ADD0D9 }

.tr { /* 3 */
clear: both; /* Отменяет действие параметра float */
}
<div class=»tr»>
<div id=»title1″>Чебурашка</div>
<div id=»title2″>Гена</div>
<div id=»title3″>Шапокляк</div>
</div>
<div class=»tr»>
<div id=»col1″>Отряд мягкотелых, семейство лопоухих.<br>Это безобидное пушистое животное ныне находится на грани исчезновения, вследствие неправомерных действий людей охотившихся на чебурашек из-за их ценного меха и вкусного питательного мяса.</div>
<div id=»col2″>Отряд длинномордых, семейство зеленых.<br>Хищник. Охотится на охотников, охотившихся за чебурашками. Ошибочно причисляется некоторыми авторами к отряду земноводных. Не имеет ничего общего с крокодилами.</div>
<div id=»col3″>Отряд бабок, семейство вонючевредных.<br>Очень опасное существо из-за особенностей развития в пубертарном периоде. Является симбионтом с животным crysa larisa.</div>
</div>
Селектор title предназначен для описания стиля заголовков, а col ? задает вид колонки. Цифрами в имени селекторов обозначим номер колонки, чтобы разделить стиль каждой из них, цвет фона ведь у них различается. Так, идентификатор title1 определяет параметры заголовка первой колонки, а col3 ? внешний вид третьей колонки.

Перечисление селекторов через запятую (стиль, помеченный единицей) называется группированием и предназначено для удобства и сокращения записи, чтобы не повторять одни и те же элементы несколько раз. Первые четыре параметра описывают стиль текста заголовка ? гарнитуру шрифта, его размер и цвет. Ширина колонок с помощью свойства width устанавливается фиксированной и равной 200 пикселов. Расстояние между колонками определяется аргументом margin-left, а между заголовком и его содержанием ? значением margin-top. Изменяя эти величины, можно уменьшать или наоборот, усиливать расстояние между слоями. Атрибут float следует указывать обязательно, без него никаких колонок мы не получим.

Следующая запись, помеченная двойкой, определяет вид текста для всех трех колонок и не представляет важности для создания макета. А вот без класса tr (стиль, отмеченный тройкой) не обойтись. Используемый в нем параметр clear отменяет действие float и заставляет слои располагаться друг под другом. Тем самым создается заголовок и блок текста под ним.
Слой с именем tr в примере 1 предназначен для отмены действия параметра float. В принципе, можно его убрать, а после <div id=»title3″>Шапокляк</div> добавить следующее.

<div style=»clear: both»></div>

Точно такую же конструкцию надо добавить после слоя col3.

br { clear: both; } — Можно и так, результат все равно один.
Александр, проверь вложенность слоев и добавь <div style=»clear: both»></div> после слоя, в котором применяетcя float.
2. Колонки с разделительной линией
#col1, #col2, #col3 {
width: 200px; /* Ширина колонок */
padding: 0 7px; /* Поля по вертикали и горизонтали */
float: left; /* Состыковка колонок по горизонтали */
}
#col1, #col2 {
border-right: 1px solid #000; /* Параметры линии справа от текста */
}
<div id=»col1″> контент</div>
<div id=»col2″> контент</div>
<div id=»col3″> контент</div>
Параметр float, как уже упоминалось, требуется для размещения слоев по горизонтали. Вертикальная линия создается с помощью свойства border, изменяя значение которого, можно получить линии разной толщины, цвета и вида.

Величина отступов от текста до черты варьируется параметром padding. Через пробел указываются поля по вертикали и горизонтали, в примере верхнее и нижнее поле равно нулю, чтобы линия не выступала над текстом.
3. Альтернативный подход к созданию макета из трех колонок с помощью слоев состоит в использовании методов позиционирования. Сюда входит применение параметра position совместно с параметрами left и top. Аналогично верстке двухколонного макета разделяют два подхода: с абсолютным и относительным позиционированием элементов.
При абсолютном размещении слоев их положение жестко фиксируется относительно края окна браузера и не меняется при изменении его размеров. Надо учитывать, что один слой может накладываться на другой, перекрывая его содержимое. Поэтому следует учитывать размеры слоев и их позицию с тем, чтобы нужная информация была видна.

Основное достоинство абсолютного позиционирования ? в удобстве определения местоположения элементов. Это напоминает аппликацию, когда мы точно знаем, куда и как надо поместить нужный фрагмент картины.

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

Рассмотрим как создать три колонки, как показано на рис. 1, используя абсолютное позиционирование.

В модульной сетке на рис. 1 задействовано шесть слоев, выделенных разным цветом. Стиль данного макета можно условно поделить на две части ? первая часть описывает оформление и вид элементов, а вторая — их положение. Заголовки к каждому блоку назовем title1, title2, title3, где число обозначает номер колонки, а col1, col2, col3 ? соответственно названия самих колонок с текстом. Местоположение слоев задается параметрами left и top, которые определяют расстояние по горизонтали и вертикали от левого верхнего угла окна браузера до левого верхнего угла слоя. Значения этих параметров указываются с учетом ширины слоев и расстояния между ними. При этом обязательно в стиль слоя для атрибута position следует добавить значение  absolute (пример 1).
#title1, #title2, #title3, #col1, #col2, #col3 { /* 1 */
font-family: Verdana, Arial, sans-serif; /* Рубленый шрифт */
font-weight: bold; /* Жирное начертание текста заголовка */
font-size: 80%; /* Размер шрифта */
color: white; /* Цвет текста заголовка */
width: 200px; /* Ширина колонок */
border: 1px solid black; /* Рамка вокруг слоя */
position: absolute; /* Абсолютное позиционирование */
top: 30px; /* Положение от верхнего края */
padding: 5px; /* Поля вокруг текста */
}

#col1, #col2, #col3 { /* 2 */
font-family: «Times New Roman», Times, serif; /* Шрифт с засечками */
font-size: 100%; /* Размер шрифта */
font-weight: normal; /* Нормальное начертание */
color: black; /* Цвет текста */
top: 60px; /* Положение от верхнего края */
}

/* Цвет фона каждого слоя */
#title1 { background: #b38541; }
#title2 { background: #008159; }
#title3 { background: #006077; }
#col1 { background: #ebe0c5; }
#col2 { background: #bbe1c4; }
#col3 { background: #add0d9; }

/* Положение каждого слоя */
#title1 { left: 20px; }
#title2 { left: 225px; }
#title3 { left: 430px; }
#col1 { left: 20px; }
#col2 { left: 225px; }
#col3 { left: 430px; }

<div id=»title1″>Заголовок 1</div>
<div id=»title2″>Заголовок 2</div>
<div id=»title3″>Заголовок 3</div>
<div id=»col1″>Колонка 1</div>
<div id=»col2″>Колонка 2</div>
<div id=»col3″>Колонка 3</div>

4. При относительном позиционировании слои привязаны друг к другу, но их общее положение на странице может быть любым. Тем самым макет допустимо размещать по центру страницы или выравнивать по одному из краев браузера. Это дает широкие возможности по созданию веб-страниц. Фактически, верстка на основе слоев построена преимущественно на использовании относительного позиционирования элементов.
При создании двух колонок, левому слою необходимо задать абсолютное положение, а правому ? относительное. Это наиболее универсальный подход, который гарантирует, что слои будут позиционированы правильно относительно друг друга и окна браузера. Обязательно следует сместить второй слой по горизонтали с помощью параметра left на величину, равной ширине левого слоя. В противном случае слои будут накладываться друг на друга.

Описанный метод работает только с двумя колонками и добавление третьей колонки приводит к смещению слоя. Результат получается совершенно невостребованным. Чтобы поправить положение, необходимо снова вернуться к двум колонкам. Для этого следует объединить две левые колонки, поместив их внутрь дополнительного слоя. Результат манипуляций показан на рис. 2.

Вновь созданный слой с именем tr выступает в роли одной колонки, поэтому можно воспользоваться тем же методом, что и в случае макета с двумя слоями. А именно, для слоя tr следует задать абсолютное положение, а для слоя col3 ? относительное. Схема вложенности слоев и способ позиционирования приведены в примере 2.

Пример 2. Размещение слоев для создания трех колонок
<div id=»tr» style=»position: absolute»>
<div id=»col1″ style=»position: absolute»>…</div>
<div id=»col2″ style=»position: relative»>…</div>
</div>

<div id=»col3″ style=»position: relative»>…</div>
Смещение слоев по горизонтали и вертикали относительно друг друга управляется аргументами параметров left и top и зависит от ширины колонок и пробелов между ними (пример 3).

#title1, #title2, #title3, #col1, #col2, #col3 { /* 1 */
font-family: Verdana, Arial, sans-serif;
font-weight: bold;
font-size: 80%;
color: white;
width: 200px;
border: 1px solid black;
}

#col1, #col2, #col3 { /* 2 */
font-family: «Times New Roman», Times, serif;
font-size: 100%;
font-weight: normal;
color: black;
}

#col1, #title1 { /* 3 */
position: absolute;
}

#col2, #title2 { /* 4 */
position: relative;
left: 205px;
}

#col3, #title3 { /* 5 */
position: relative;
left: 410px;
}

#col1, #col2, #col3 { /* 6 */
top: 5px;
}

.tr { /* 7 */
position: absolute;
}

p {
margin: 5px;
}

#title1 { background: #b38541; }
#title2 { background: #008159; }
#title3 { background: #006077; }
#col1 { background: #ebe0c5; }
#col2 { background: #bbe1c4; }
#col3 { background: #add0d9; }

<div class=»tr»>
<div id=»title1″><p>Чебурашка</p></div>
<div id=»title2″><p>Гена</p></div>
</div>
<div id=»title3″><p>Шапокляк</p></div>
<div class=»tr»>
<div id=»col1″><p>…</p></div>
<div id=»col2″><p>…</p></div>
</div>
<div id=»col3″><p>…</p></div>