Лекция: Подвал ...
</div>
А теперь 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;
}
Мы используем свойство float для того, чтобы задать положение блока content на странице и задаем ширину этого блока равной двум третям окна браузера. В соответствии с правилами CSS, последующее содержимое включенное в «плавающую модель», а в нашем случае это блок sidebar, будет «обтекать» блок content со стороны, противоположной направлению выравнивания, т.е. Справа.
Свойство float работает примерно как атрибут align, который применяется в HTML, но дает больше возможностей управления отображением элементов за счет использования полей, рамок и отступов.
Разный цвет фона блоков задан лишь для того, чтобы Вам легче было наблюдать границы блоков, если Вы вдруг захотите испытать этот пример.
И наконец, в блоке footer используется свойство clear для того, чтобы гарантировано обеспечить его отображение ниже любого элемента из «плавающей модели».
Правда такой вариант имеет недостаток. При наличии в блоке sidebar содержимого большего объема, чем в блоке content, «лишнее» содержимое перестает обтекать блок content и занимает всю ширину окна браузера.
Устранить недоразумение возможно, если подкорректировать значения левого отступа или левого поля элемента sidebar. Для этого мы используем свойство margin-left:67%.