Реферат: Продвинутая CSS-верстка: шаг за шагом
<body>
<div id="level0">
<div id="level1">
<div id="topBar">
This is the top navigation bar.
<div id="advBar">
This is the advertisement bar.
</div>
</div>
<div id="level2">
<div id="level3">
<div id="main">
The code you are reading.
</div>
</div>
</div>
</div>
</div>
</body>
...
"Совет дня"
Теперь у нас есть три блока, куда мы можем поместить любое содержимое, основная область, верхний навигационный блок и рекламный блок. Каждый из этих элементов принимает высоту содержимого, но ширина у них фиксированная. Давайте теперь создадим блок, содержащий "Совет дня". Сделаем его плавающим, чтобы содержимое центральной области его огибало. Вложим в "main" слой "tipDay", и зададим для него перемещение вправо. Также укажем для него некоторую ширину (для плавающих элементов ширина обязательно должна быть задана). Взгляните.
#tipDay {
float:right;
width:175px;
background:#FFF3AC;
}
Что с контентом?
Теперь давайте решим, как именно мы будем заполнять блоки содержимым. Самым естественным решением было бы использовать свойство float, но из-за проблем с отображением плавающих блоков в Opera и IE нам придется использовать абсолютное позиционирование. Ошибки в IE небольшие, и ими можно было бы пренебречь, но, к сожалению, с проблемами в Opera нам справиться не удалось. По этим ссылкам расположены описания возникших ошибок: одна ошибка в Opera, другая ошибка в Opera, ошибка в IE.