Gaist-Endruy ( off )
( 08:20 01-09-2009 )
Служебный блок main является контейнером остальных блоков с содержимым. У него нет границ и отступов, а width: 100% - следовательно, ширина main равна ширине окна браузера. В блоке не будет текста, но он очень важен для нашего макета. Во-первых, для абсолютного позиционирования CSS блоков правого и левого меню, во-вторых, для создания серого (#ccc) фона меню на всю высоту страницы.

---

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

---

Gaist-Endruy ( off )
( 08:21 01-09-2009 )
Для main задан серый фон. Сделано это для полного закрашивания блоков боковых меню. В CSS, судя по всему, невозможно задать высоту (height) блока в процентах от окна браузера, поэтому высота определяется в зависимости от объема содержимого.

---

Gaist-Endruy ( off )
( 08:21 01-09-2009 )
То есть боковые колонки меню будут иметь разную высоту, и задавать фон для них не имеет смысла. Поэтому мы заливаем фоном main. Далее зальем другим цветом блок содержимого и «подвал» макета, а колонки с прозрачным фоном визуально будут одинаковой высоты. Дешево и сердито.

---

Gaist-Endruy ( off )
( 08:22 01-09-2009 )
Cвойство overflow: hidden; необходимо, чтобы убрать мелкий баг IE6. Internet Explorer 6 под управлением Windows XP с экранной XP темой (в случае классической темы Windows все нормально) считает...

---

Gaist-Endruy ( off )
( 08:23 01-09-2009 )
что страница не помещается полностью в окно браузера и добавляет полоску горизонтальной прокрутки. Прокручивается всего 1–2 пикселя, видимо XP-тема увеличивает ширину элементов интерфейса браузера, но он (браузер) этого понять не в состоянии…

---

Gaist-Endruy ( off )
( 08:23 01-09-2009 )
Так или иначе, overflow: hidden; указывает, что содержимое, которое выходит за границы контейнера (жизненный пример - очень длинное слово в узком CSS блоке), обрезается и пользователю не предоставляется возможности (полос прокрутки, например) это содержимое просмотреть. В нашем случае контейнером является блок main, шириной в 100% окна браузера, а содержимым - вложенные блоки.

---

Gaist-Endruy ( off )
( 08:24 01-09-2009 )
#content {
width: 58%;
margin: 0px 20% 0px 20%;
padding: 1%;
background-color: #f0f0f0;
}

#footer {
width: 58%;
margin: 0px 20% 0px 20%;
padding: 1%;
background-color: orange;
}
Прикрепленный файл .txt: скачать (190b)

---

Gaist-Endruy ( off )
( 08:24 01-09-2009 )
CSS блоки основного содержимого и «подвала». Светло-серый фон для удобства чтения - белый фон и черный шрифт слишком контрастны и могут утомлять глаза. Для footer используется оранжевый. В остальном CSS описание блоков одинаковое.

---

Gaist-Endruy ( off )
( 08:24 01-09-2009 )
Оба занимают всю ширину страницы. Ширина содержимого 58%. Внешние отступы (используется сокращенная запись в формате - margin: top left bottom right;) 20% слева и 20% справа. Плюс внутренняя отбивка содержимого от рамки блока в 1% сверху, слева, справа и снизу. Считаем горизонтальный размер CSS блока слева направо: 20% + 1% + 58% + 1% + 20% = 100%.

---