CSS: верстка макета из одной колонки

Вроде бы вполне примитивная задача. В общем согласен, но все-таки предлагаю разобраться немного подробнее. Итак попробуем создать макет страницы, состоящий всего из одной колонки.

Попробуем сделать нашу колонку «резиновой».










.

1

body {

2	margin-left:20%;

3	margin-right:20%;

4

}

Мы задали значения левого и правого полей элемента body в процентах, что позволяет содержимому занимать всю ширину окна браузера (за исключением полей естественно) и располагаться при этом точно в центре.
Если мы хотим задать нашей колонке фиксированную ширину- поступим вот так:

1

body {

2	width:600px;

3

}

При этом колонка будет выровнена по левому краю окна браузера. И если нам необходимо вновь отцентрировать ее, то без дополнительного блока не обойтись.

1	<div id="content">

2	... содержимое блока ...

3

</div>

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

1

body {

2	width:600px;

3	padding-left:50%;

4

}

5	#content {

6	width:600px;

7	margin-left:-300px;

8

}

Разберем подробнее, что же мы натворили?

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

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

1	#content {

2	width:600px;

3	margin-left:auto;

4	margin-right:auto;

5

}

К моему (да и не только к моему) великому сожалению, этот способ хорош для всех браузеров, кроме того, названИЕкоторого Вы знаете. А он у нас пока самый популярный…

http://www.linkexchanger.su/2008/9.html