Когда-то я уже разбирал структуру двухколоночной вёрстки , однако, там левая и правая колонки разные по высоте. Для некоторых дизайнов это не подойдёт, и придётся мучаться с height: 100% у div , что всегда весьма проблемно, тем более, что можно сразу сделать двухколоночную вёрстку с одинаковыми по высоте колонками .
Когда-то я уже разбирал структуру двухколоночной вёрстки, однако, там левая и правая колонки разные по высоте. Для некоторых дизайнов это не подойдёт, и придётся мучаться с height: 100% у div, что всегда весьма проблемно, тем более, что можно сразу сделать двухколоночную вёрстку с одинаковыми по высоте колонками.
Для начала разберём HTML-структуру двухколоночной вёрстки с одинаковой высотой колонок:
<div id="container_1">
<div id="container_2">
<div id="left">
<p>Левая часть сайта</p>
</div>
<div id="right">
<p>Правая часть сайта</p>
<p>Правая часть сайта</p>
<p>Правая часть сайта</p>
</div>
<div class="clear"></div>
</div>
</div>
И CSS-код:
#container_1 {
background-color: #f00;
width: 25%;
}
#container_2 {
background-color: #0f0;
margin-left: 100%;
width: 300%;
}
#left {
float: left;
margin-left: -30%;
margin-right: -100%;
width: 50%;
}
.clear {
clear:both;
}
Обратите внимание, что Вам придётся подбирать параметры под Ваш дизайн. Самый лучший вариант скопировать весь этот код, вставить на отдельную страницу и через Firebug попробовать поиграться со свойствами, чтобы понять, что за что отвечает.
Вот так делается двухколоночная блочная вёрстка с одинаковой высотой колонок.
