Вернемся на пару занятий в прошлое. Мы с вами рассматривали типичное расположение элементов страниц - или стандартный шаблон для верстки страниц. При этом, для размещения "шапки", меню, контента и пр., мы использовали таблицу. Однако, использование таблиц в таком контексте не соответствует идеалогии структурной разметки (таблицы используются не по своему прямому назначению). Что же делать, если вопрос идеалогии критичен? Использовать "плавающие" элементы.

На самом деле, никто и никуда не "плавает". Плавающими элементами называют элементы, обтекаемые текстом слева или справа. А за обтекание отвечает свойство... Правильно - float! Это свойство может принимать следующие значения:

• none - нет обтекания
• left - элемент обтекается слева (располагается справа)
• right - элемент обтекается справа (располагается слева)

Этот вопрос в другом контексте уже рассматривался в уроке №03 - "Графика на web-страницах" (применялось для выравнивания изображений относительно страницы). Как же применить свойство float в нашем контексте - бестабличная верстка? Рассмотрим шаблон:

Рис. №11.2.1. Типичный шаблон верстки

Как можно заметить, "плавающими" здесь будут элементы "Лого" и "1я колонка" (или 2я - как вам больше нравится)

В первую очередь подготовим элементы:

...
<div id="header">
 <div id="logo"></div>
 <h1>Welcome to our site!</h1>
</div>
<div id="left_col">
 -- menu --
</div>

<div id="right_col">
 -- content --
</div>

<div id="foother">
&copy; Copyright AlexART, 2005.
</div>
...

Теперь займемся стилями:

#header {
 border: 1px solid black;
 background-color: #660000;;
 color: white;
 height: 80px; 
} 

#logo {
 height: 65px;
 width: 400px;
 float: right;

 border: 1px solid black;
 color: white;
 height: 72px; 
 width: 120px; 
 margin: 5 3 5 0; 
 text-align: center;
 padding-top: 20px; 
} 

#left_col {
 width: 200px;
 height: 400px;
 float: left;

 border: 1pz solid black;
 background-color: #dddddd; 
 margin-right: 5px;
 padding: 5px;
} 
#right_col {
 height: 400px;
 border: 1pz solid black;
 background-color: #dddddd; 
 padding: 5px;
} 
#foother {
 border: 3px double black;
 background-color: #990000;
 color: white;
 margin-top: 5px; 
 text-align: center;
 padding: 10px;
}

В результате мы не только получили требуемый вид страницы без использования таблиц. Страницы получилась "резиновой". Такая страница автоматически адаптируется под любой (практически) размер окна браузера, выглядит, при этом, одинаково привлекательно и использует предоставленное ей пространство с максимальной эффективностью.

Пользуйтесь!