Построим макет страницы с заголовочной частью сайта и тремя колонками. Каждая колонка должна иметь свой цвет и распространяться вниз до конца страницы. Вид макета показан на рисунке:
Высоту заголовочной части возьмём 100 пикселов. Ширину левой колонки определим в 150 пикселов, правой — в 200 пикселов, а центральная (основная) колонка будет резиновая.
Сначала построим HTML-код страницы:
Файл index.htm
Теперь запишем стилевые определения. Для того, чтобы колонки распространялись вниз до конца страницы, будем использовать стилевое указание height:100%. Отступы содержимого колонок от краёв колонок зададим в 10 пикселов и добавим это значение к отступам от краёв документа в соответствующих свойствах padding
Файл style.css
BODY { margin:0px; padding:0px; } /* Заголовок и логотип */ .title { position: absolute; z-index:5; /* Блок расположен поверх других блоков */ left:0px; top: 0px; width: 100%; height: 100px; margin:0px; padding:0px; border-bottom: 1px solid black; background: #06DFE1; } /* Левая колонка */ .left { position: absolute; left:0px; top: 0px; width: 150px; height:100%; margin: 0px; padding: 110px 10px 10px 10px; background: #FFE3CC; } /* Правая колонка */ .right { position: absolute; right:0px; top:0px; width: 200px; height:100%; margin: 0px; padding: 110px 10px 10px 10px; background: #E5E5E5; } /* Центральная колонка */ .center { height:100%; margin: 0px; padding: 110px 210px 10px 160px; background: #FFF2A6; } /* Подвал */ .bottom { font-size:70%; font-family:sans-serif; margin-top:10px; border-top: 1px solid black; }
Стилевые определения устроены так. На основную область center накладываются три абсолютно позиционированные области (заголовочная часть, левая и правая колонки). Чтобы в основную область содержимое выводилось правильно, задаются соответствующие отступы при помощи свойства padding:
Посмотрим, что у нас получилось.
Файл index.htm
В браузере Microsoft Internet Explorer смотрится, как и было задумано. В браузерах Mozilla Firefox и Opera налицо проблемы:
Во-первых, появилась вертикальная прокрутка, хотя содержимое не выходит за низ окна, во-вторых, текст центральной колонки обрезается слева. Эти проблемы возникают из-за разной интерпретации свойств padding и border в этих браузерах. В IE отступы и границы входят в состав области, другие браузеры добавляют размеры отступов и границ к размерам областей (появляются смещения и линейка прокрутки).
Возникает идея: вложить каждую колонку в дополнительный блок, для которого будет записано свойство padding=0px.
Сначала переделаем HTML-код:
Файл index.htm
Cоответственно с задуманным изменим стилевые определения:
Файл style.css
BODY { margin:0px; padding:0px; } /* Заголовок и логотип */ .title { position: absolute; z-index:5; /* Блок расположен поверх других блоков */ left:0px; top: 0px; width: 100%; height: 100px; margin:0px; padding:0px; border-bottom: 1px solid black; background: #06DFE1; } /* Оболочка левой колонки */ .leftroot { position: absolute; left:0px; top: 0px; width: 150px; height:100%; margin: 0px; padding 0px; background: #FFE3CC; } /* Левая колонка */ .left { padding: 110px 10px 10px 10px; } /* Оболочка правой колонки */ .rightroot { position: absolute; right:0px; top:0px; width: 200px; height:100%; margin: 0px; padding: 0px; background: #E5E5E5; } /* Правая колонка */ .right { padding: 110px 10px 10px 10px; } /* Оболочка центральной колонки */ .centerroot { height:100%; margin: 0px; padding: 0px; background: #FFF2A6; } /* Центральная колонка */ .center { padding: 110px 210px 10px 160px; } /* Подвал */ .bottom { font-size:70%; font-family:sans-serif; margin-top:10px; border-top: 1px solid black; }
Посмотрим, что получилось.
Файл index.htm
Отображается правильно, и в Microsoft Internet Explorer, и в браузерах Mozilla Firefox и Opera: