Лекция: Содержимое блока ...

</div>

и далее вот такой css код:

body {

width:600px;

padding-left:50%;

}

#content {

width:600px;

margin-left:-300px;

}

Чтобы понять суть этого приема, надо хорошо понимать основы модели визуального форматирования. В частности точно представлять, из каких именно величин складывается общая ширина (высота) блока. При этом еще необходимо учитывать различия в реализации блочной модели конкретных браузеров. Особенно того, названИЕкоторого Вы и так знаете.

В элементе body, который имеет ширину 600px мы задали левый отступ в 50%, добавив таким образом к ширине элемента половину ширины окна браузера. При этом левый край блока content расположился бы точно по центру окна, но мы предусмотрительно сдвигаем его ровно на половину ширины, на 300px влево, задавая отрицательное значение левого поля.

Теперь блок content расположен точно в центре экрана и ширина его фиксирована. Этот прием работает во всех популярных браузерах.

Макет из двух колонок

Попробуем теперь создать макет страницы с двумя колонками, изменяющими свою ширину в зависимости от ширины окна браузера, т.е. «резиновый» макет. И сначала создадим HTML-разметку, форматировать которую будем с помощью стилевых таблиц.

<div id=«header»>