Когда-то я писал про структуру для трёхколоночного сайта . А в этом материале я покажу, как выглядит структура вёрстки для двухколоночного сайта .
Когда-то я писал про структуру для трёхколоночного сайта. А в этом материале я покажу, как выглядит структура вёрстки для двухколоночного сайта.
Для начала HTML-код:
<div id="header">Шапка сайта</div>
<div id="content">
<div id="left">Левая колонка</div>
<div id="right">Правая колонка</div>
</div>
<div class="clear"></div>
<div id="footer">Подвал</div>
И CSS-код:
.clear {
clear: both;
}
#content {
width: 100%;
}
#left {
float: left;
margin-right: 30px;
width: 200px;
}
#right {
width: 100%;
}
Ключевой момент здесь состоит в том, что у нас #content имеет ширину 100%, то есть он растягивается на всю ширину родительского контейнера (например, body). Дальше мы указываем фиксированный размер для #left (хотя можно указать и проценты, если это необходимо), а для #right мы указываем 100% от оставшегося свободного места.
Вот так выглядит структура вёрстки для двухколоночного сайта.
