Версия для печати

Полная версия

На сайте webmascon.com есть перевод довольно интересной статьи Продвинутая CSS-верстка: шаг за шагом в которой есть один нюанс, связанный со спецификой реализации модели сайта с несколькими колонками. Давайте детально его рассмотрим, тем более что в статье ему не уделено должного внимания.

Итак, ситуация заключается в следующем. Нам надо сделать сайт, который содержит верхнюю и нижнюю часть, между которыми находятся три колонки (см. рис.).

Если делать верстку такой модели с помощью таблицы, то никаких особых проблем не возникнет. А вот если использовать CSS, то основная трудность будет заключаться в том, чтобы добиться от колонок одинаковой высоты. Если мы заранее не знаем их содержимого, то установить их фиксированную высоту не получится. Высота колонки определяется ее содержимым. MSIE сам автоматически растянет блок таким образом, что содержание вместилось в него полностью. Для Opera и NN для этого необходимо указать height: auto. Можно попробовать вложить эти колонки в общий блок и указать height:100%, но в этом случае, если для внешнего блока не указана его высота (а ведь мы ее заранее не знаем), колонки растянутся на высоту окна броузера. Также броузеры не поддерживают min-height, а IE 5.5 к тому же не понимает min-width, max-width и max-height.

В итоге мы можем рассчитывать только на результат, представленный на втором рисунке (высота каждой колонки определяется ее содержимым, на рисунке представлена ее условная величина). Конечно, если фон колонок одинаковый и между ними нет разделителей, то проблема сама собой отпадает. Но в данном случае ее надо как-то решать.

В любом случае нам надо выделить колонку, которая будет определять высоту всех остальных. Предположим, что центральная часть содержит достаточно много информации об обновлениях, ссылки на старые и новые статьи, новости форума и мы будем ориентироваться именно на нее.

Итак, начнем. Для начала создадим блоки для верхней и нижней частей страницы:

 #top{ background: #F0B45F;
 width: 100%}

 #bottom{ background: #F0B45F;
 width: 100%}

Далее определим блок, в котором будут находиться наши колонки:

 #main{ background: #F2D58E;
 width: 100%}

Для этого шага HTML-код будет таким:

 <div id=top> Это верхняя часть страницы</div>
 <div id=main>
	Внешний блок в котором
	будут находиться колонки
 </div>
 <div id=bottom>Нижняя часть страницы</div>

Начало положено. Теперь определимся с шириной колонок. Пусть левая и правая части будут по 25%, а центральная, соответственно - 50% от ширины окна броузера. Создадим блок, который будет включать центральную и правую часть страницы:

 #lr{
 margin-left: 25%;
 background: #F2D58E}

В него поместим правую и центральную колонку, при этом их ширина будет определяться относительно ширины внешнего блока lr, занимающего 75% полезной площади, следовательно для центра у нас будет ширина примерно 66%:

 #center{
 width: 66%;
 background: #F2F1AF}

HTML-код будет таким:

 <div id=top>
	Это верхняя часть страницы
 </div>
 <div id=main>
 <div id=lr>
 <div id=center>
 	Это центральная часть страницы,
	которая и будет определять высоту
	всех колонок.
 </div>
 </div>
 </div>
 <div id=bottom>
	Нижняя часть страницы
 </div>

Ну вот, уже что-то более конкретное .

Уже сейчас можно убедиться, что блок center определяет высоту двух других. Однако нам еще надо добавить в них текст. Вписать его просто в нужные блоки не получится. Следовательно, нам надо создать соответствующие области, в которые мы впишем текст, и которые будут размещаться там где и требуется:

 левый блок
 #lftbar{position: absolute;width:25%}
 правый блок
 #rgtbar{position: absolute;
	right: 0%; width: 25%}

Эти блоки необходимо разместить после шапки и внести в них нужный текст следующим образом:

 <div id=top>
	Это верхняя часть страницы
 </div>
 <div id=lftbar>
	Это левая часть страницы
 </div>
 <div id=rgtbar>
 	Это правая часть страницы
 </div>
 <div id=main>
 <div id=lr>
 <div id=center>
	Это центральная часть страницы,
 	которая и будет определять высоту
	всех колонок.
 </div>
 </div>
 </div>
 <div id=bottom>
	Нижняя часть страницы
 </div>

Вроде получили то, что и хотели. Внесем небольшие коррективы, чтобы сделать отступы между блоками. Вуаля.

В общем ничего сложного здесь нет. По поводу преимуществ и недостатков различных способов верстки можно долго спорить, но факт остается фактом - с помощью CSS можно сделать то же, что и при использование одного HTML, достаточно только проявить творческий подход и смекалку.