Двухколоночная вёрстка с одинаковой высотой колонок
Когда-то я уже разбирал структуру двухколоночной вёрстки, однако, там левая и правая колонки разные по высоте. Для некоторых дизайнов это не подойдёт, и придётся мучаться с 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 попробовать поиграться со свойствами, чтобы понять, что за что отвечает.
Вот так делается двухколоночная блочная вёрстка с одинаковой высотой колонок.
-
Создано 19.02.2014 12:34:48
-
Михаил Русаков
Комментарии (2):
Круто! Спасибо за статью!
Ответить
можно сделать так <head> <style> div:first-child { float: left; background-color: #f00; width: 20%; height: 119.2px;} /*высоту правого блока смотрим в отладчике*/ div:last-child { background-color: #0f0; width: 80%; overflow: hidden;} </style> </head> <body> <header> <div> <p>Левая часть сайта</p> </div> <div> <p>Правая часть сайта</p> <p>Правая часть сайта</p> <p>Правая часть сайта</p> </div> </header> </body>
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.