Построим макет страницы с заголовочной частью, подвалом и тремя колонками фиксированной ширины. Макет должен быть выровнен по центру страницы и просматриваться без горизонтальной прокрутки в окне шириной 800 пикселов.
Для выполнения последнего условия назначим ширину колонок соответственно в 160, 440 и 160 пикселов:
Запишем HTML-код по следующей схеме:
То есть вcе наши области погрузим в блок container для которого зададим выравнивание по центру страницы:
Запишем стилевые определения.
Файл style.css
BODY { margin:0px; padding:0px; background: #F6F2E4; } .container { width: 760px; /* Общая ширина контейнера */ margin: 10px auto; /* Выравнивание по центру */ border: 1px solid black; background: white; } /* Заголовок и логотип */ .title { border-bottom: 1px solid black; background: #06DFE1; } /* Левая колонка */ .left { float: left; /* Плавающий блок */ /* Общая ширина: 160 = 5 + 150 + 5 */ width: 150px; padding: 5px; background: #FFE3CC; } /* Центральная колонка */ .center { float: left; /* Плавающий блок */ /* Общая ширина: 440 = 5 + 430 + 5 */ width: 430px; padding: 5px; background: #FFF2A6; } /* Правая колонка */ .right { float: left; /* Плавающий блок */ /* Общая ширина: 160 = 5 + 150 + 5 */ width: 150px; padding: 5px; background: #A7FBC0; } /* Подвал */ .bottom { clear:left; /* Прерывание обекания для плавающих блоков */ font-size:70%; font-family:sans-serif; padding: 5px; border-top: 1px solid black; background: #E5E5E5; }
Макет основан на трёх плавающих блоках, которые моделируют 3 колонки нашей вёрстки.
Выравнивание по центру задаётся немного странным определением margin: 10px auto. Дело в том, что по умолчанию ширина блока принимает значение auto, и блок занимает ширину всей страницы. Описанным способом по центру можно выровнять только такой блок, у которого явно задана ширина (как в нашем случае). Первый аргумент задаёт нижние и верхние поля в 10 пикселов, а второй — автоматический отступ слева и справа от блока.
Ниже приводится более полный вариант HTML-кода страницы:
Файл index.htm