Двинемся дальше, и попробуем создать макет страницы с двумя колонками, изменяющими свою ширину в зависимости от ширины окна браузера, т.е. «резиновый» макет. И сначала создадим HTML-разметку, форматировать которую будем с помощью стилевых таблиц.

<div id="header">
... шапка страницы ...
</div>
<div id="content">
... основное содержимое страницы ...
</div>
<div id="sidebar">
... колонка меню ...
</div>
<div id="footer">
... подвал ...
</div>

А теперь css код, который сформирует нужное нам визуальное представление:

#content {
float:left;
width:67%;
background-color:#CCC;
}
#sidebar {
background-color:#FFC;
}
#header {
background-color:#FCF;
text-align:center;
}
#footer {
clear:both;
text-align:center;
background-color:#CFF;
}

Мы используем свойство float для того, чтобы задать положение блока content на странице и задаем ширину этого блока равной двум третям окна браузера. В соответствии с правилами CSS, последующее содержимое включенное в «плавающую модель», а в нашем случае это блок sidebar, будет «обтекать» блок content со стороны, противоположной направлению выравнивания, т.е. справа.
Свойство float работает примерно как атрибут align, который применяется в HTML, но дает больше возможностей управления отображением элементов за счет использования полей, рамок и отступов.
Разный цвет фона блоков задан лишь для того, чтобы Вам легче было наблюдать границы блоков, если Вы вдруг захотите испытать этот пример.
И наконец в блоке footer используется свойство clear для того, чтобы обеспечить его отображение гарантировано ниже любого элемента из «плавающей модели».

Правда такой вариант имеет недостаток. При наличии в блоке sidebar содержимого большего объема, чем в блоке content, «лишнее» содержимое перестает обтекать блок content и занимает всю ширину окна браузера.

Устранить недоразумение возможно, если подкорректировать значения левого отступа или левого поля элемента sidebar. Так мы и поступим, записав margin-left:67%; Посмотрите приведенный ниже окончательный css код.

#content {
float:left;
width:67%;
background-color:#CCC;
}
#sidebar {
margin-left:67%;
background-color:#FFC;
}
#header {
background-color:#FCF;
text-align:center;
}
#footer {
clear:both;
text-align:center;
background-color:#CFF;
}

Буду рад, если этот рецепт кому-нибудь пригодится.

Поделиться в FaceBookПоделиться ВКонтактеДобавить в TwitterПоделиться в Моём МиреСохранить закладку в GoogleОтправить в Живую ленту GoogleДобавить в Яндекс.ЗакладкиПоделиться в ОдноклассникахОпубликовать в LiveJournal