Верстка блоков ( <div>'ов ) с одинаковой высотой

Добрый день ув. читатели сего временно загинувшего бложика. Да, да я долгое время не писал, но тому были веские причины в виде моей занятости и коварных заговоров моих врагов, тем не менее блог снова активизируется, Ура!

Сегодня я хочу рассказать, а таком не приятном деле как верстка, в частности у верстке блоков с одинаковой высотой ( статья посвящена новичкам).

Сами понимаете, что высота блока зависит либо от явно заданных размеров например div{height:600px}, ну или от количества текста размещенного в блоке. Ну как же сделать так, чтобы блоки в 2-3... 500 колоночном дизайне были одинаковой высоты?

Метод номер уан! Использование JavaScript'a или фреймворков основанных на нем. Об этом методе уже много рассказано. по этому я его упускаю.

Метой номер ту! Обман пользователя при помощи фонового изображения!

Известный факт, что равная высота блоков необходима лишь в тех случаях, когда у блоков различный фон. Метод номер ту очень простой! Нам необходимо добавить в верстку еще один див, в который мы поместим оба наших блока, т.е. для двоих блоком вы создадим родительский див к которому и применим необходимый фон. Вот наша фоновая картинка, на которой изображены размеры блоков(не путайте с

, размеры

могут отличатся от размеров блоков).

Применяем этот фон к родительскому элементу

:
div#container{width:1100px; background:transparent url(fon.jpg) repeat-y}

Смотрим результат(извеняюсь за картинки, у меня фотошоп здох и пришлось рисовать в Paint'e):Как видно из рисунка, #content и #navigation - дочерние элементы div#container. Им следует в стилях прописать такую ширину, чтобы они правильно вписывались в блоки.

Вот и все! Теперь вы знаете как верстать блоки с одинаковой высотой.

Достоинства метода:
Метод очень прост, валиден и работает во всех браузерах, кроме того, ненужно никаких замысловатых хаков, скриптов и т.д.

Недостатки:
Данный метод годится только для создания не резиновых сайтов, т.е. таких, где ширина блоков задается только в пикселях! Но! Существует похожий метод, который решает эту проблему тоже без хаков, на чистом html и css! Об этом методе я расскажу в следующем посте!

Спонсор поста:
Форум про партнерские программы. Хочешь знать, где в интернете можно реально заработать при этом влаживая минимум времени и сил? - Зарабатывай на партнерских программах! Как? - Узнай на форуме BESTMASTERS. Там сидят люди, которые помогут, подскажут и поделятся секретами работы с партнерками рунета и забугорья!