Gaist-Endruy ( off )
( 08:25 01-09-2009 )
Таким образом, ширина footer и content составляет 100% от родительского блока main, который в свою очередь занимает 100% от body. Нюанс - внешние отступы margin составляют по 20% с каждой стороны, внешние отступы блока прозрачны, т. е. цветом не заливаются. CSS блоки content и footer занимают всю ширину окна и пока не совсем понятно, где взять место для боковых меню.

---

Gaist-Endruy ( off )
( 08:25 01-09-2009 )
#leftmenu {
position: absolute;
top: 0px;
left: 0px;
width: 18%;
margin: 0px;
padding: 1%;
}

#rightmenu {
position: absolute;
top: 0px;
right: 0px;
width: 18%;
margin: 0px;
padding: 1%;
}
Прикрепленный файл .txt: скачать (204b)

---

Gaist-Endruy ( off )
( 08:25 01-09-2009 )
Ответ в position: absolute. Для абсолютного позиционирования не имеют значения нормальный поток и другие CSS блоки. Необходима точка отсчета, величина смещения по вертикали и горизонтали и ширина блока. Точкой отсчета может быть окно браузера, абсолютно или относительно позиционированный родительский CSS блок. Теперь ясно, зачем для блока main мы использовали position: relative и нулевое смещение.

---

Gaist-Endruy ( off )
( 08:26 01-09-2009 )
Блок leftmenu (левая навигационная панель) позиционируется от CSS блока main, смещение сверху и слева - по 0 пикселей. Для rightmenu то же смещение, но сверху и справа. Ширина обоих блоков - по 20% (1% padding-left + 18% width + 1% padding-right) от родительского main. Фактически, leftmenu и rightmenu налагаются на блоки content и footer - точнее, на их прозрачные внешние границы margin!

---

Gaist-Endruy ( off )
( 08:26 01-09-2009 )
Высота боковых меню зависит от содержимого. Меню не имеют фонового цвета, поэтому фоном для них служит серая заливка блока main. Margin'ы у content и footer прозрачны. Благодаря этому визуально боковые меню имеют одинаковую высоту и залиты серым цветом.

---

Gaist-Endruy ( off )
( 08:26 01-09-2009 )
#content p, #leftmenu p, #rightmenu p {
margin-top: 0px;
}

#header p, #footer p {
margin-top: 0px;
margin-bottom: 0px;
}
Прикрепленный файл .txt: скачать (128b)

---

Gaist-Endruy ( off )
( 08:27 01-09-2009 )
Последние штрихи. Внутри блоков информация разбивается на абзацы тегом < p >. < p > - блочный элемент, у которого есть свои внешние поля. Internet Explorer 6 совмещает margin и padding наших CSS блоков. А Opera и Mozilla их суммируют, в результате получается слишком большая «отбивка» текста сверху и снизу от границ блока. Этот код убирает вертикальные внешние отступы для элементов , вложенных в CSS блоки макета.

---

Gaist-Endruy ( off )
( 08:27 01-09-2009 )
CSS стиль для Internet Explorer 5

---

Gaist-Endruy ( off )
( 08:28 01-09-2009 )
Наш макет без проблем отображается в Internet Explorer 6 и в последних версиях Mozilla и Opera. Однако у Internet Explorer 5 свой взгляд на CSS.
Прикрепленный файл .gif: скачать (14.1Kb)

---

Gaist-Endruy ( off )
( 08:29 01-09-2009 )
Решение очевидно - для неправильного браузера делаем неправильный CSS и подключаем этот стиль только для 5-ой версии пациента.

---