Макет на три колонки

Смысл верстки слоями легче понять, если представить слои коробками разных размеров, которые нужно вложить одну в другую так, чтобы, в конечном результате, все они поместились в главную (самую большую), которая и является нашей Web-страницей.

Задача 4: Создать макет из трех колонок с гибкой областью контента, "шапкой" и "подвалом". Область основного содержимого в центре, колонка "menu" - слева. С правой стороны страницы блок новостей "news".

Решаем задачу, используя один из предыдущих макетов. Так должна выглядеть наша Web-страница, собранная из "коробок"-блоков, смотрим на рисунок и творим.

На первый взгляд все достаточно просто, добавляем еще один блок, изменяем отступы и обтекание.

• Cлой "content" стал обрамляющим, в него вложены два блока - "main" (главный) и "right" (правый). Стилевые правила для блока "content" не изменились:



2 колонки		3 колонки
#content { margin-left: 20%; font-size: 90%; text-indent: 20px; text-align: justify; padding: 20px 0px }		#content { margin-left: 20%; font-size: 90%; text-indent: 20px; text-align: justify; padding: 20px 0px }

• содержание контента Web-страницы переносим в болк "main". Он занимает все ширину блока "content", правый отступ в 150 px задан для того, чтобы в "content" поместился и блок "right":

#main {
margin-right: 150px;
padding: 0px 10px
}
• для, имеюшей свой, отличный от других цвет, колонки новостей, создаем блок "right"

#right {
float: right;
width: 150px;
margin-top: 20px;
border: solid 0px red;
background: #f9efbb
}
• блок "container", охватывает, как и прежде, блоки "content", "menu" и "clearing". Чтобы освободить место для блока "menu", назначен левый отступ и разрешено обтекание справа.

Вот, что получается - смотрим результат и знакомимся с кодом.