Схема двухколоночного макета сайта в CSS
Давайте сделаем двухколоночный макет следующего вида:
Для начала создадим основную структуру страницы:
<div id="wrapper">
<div id="header">
header
</div>
<div id="container">
<div id="content">
content
</div>
<div id="sidebar">
sidebar
</div>
</div>
<div id="footer">
footer
</div>
</div>Теперь назначим стили врапперу, выровняв его по центру экрана:
#wrapper {
width: 1000px;
margin: 30px auto;
border: 1px solid black;
}Зададим теперь стили хедера и футера:
#header {
height: 200px;
border: 1px solid black;
}
#footer {
height: 200px;
border: 1px solid black;
}Как вы видите, мы задаем хедеру и футеру высоту. Мы делаем это, как как в нашей схеме у них нет содержимого. При наличии содержимого высоту блокам задавать не стоит - она будет формироваться их содержимым.
Обратите также внимание на то, что мы не задаем им ширину. Дело в том, что хедер и футер - блочные элементы и их ширина будет автоматически равна ширине враппера.
Давайте теперь зададим им пэддинг, чтобы текст не прилипал к границам:
#header {
height: 200px;
padding: 20px;
border: 1px solid black;
}
#footer {
height: 200px;
padding: 20px;
border: 1px solid black;
}Наличие пэддинга, однако, плохо повлияет на размеры блоков - они станут больше, чем указано. Давайте изменим поведение всех блоков так, чтобы пэддинг и границы не расширяли наши блоки:
* {
box-sizing: border-box;
}Теперь нам нужно поставить контент и сайдбар в один ряд. Сделаем это с помощью флексов:
#container {
display: flex;
}Укажем контенту и сайдбару их ширину. При этом сумма их ширин должна быть равна ширине враппера:
#content {
width: 800px;
}
#sidebar {
width: 200px;
}Пусть мы хотим сделать отступ между сайдбаром и контентом. В этом случае сайдбару нужно поставить марджин. При этом нам придется от кого-то отщипнуть ширину для этого марджина. Отщипнем от контента, соответственно уменьшив его ширину:
#content {
width: 780px;
}
#sidebar {
width: 200px;
margin-right: 20px;
}Давайте теперь добавим высоту, так как наши элементы не содержат содержимого. Достаточно добавить высоту только одному элементу, ведь второй флекс элемент подстроится по высоте (почему?). Давайте зададим высоту контенту:
#content {
width: 780px;
height: 700px;
}
#sidebar {
width: 200px;
margin-right: 20px;
}Давайте добавим контенту и сайдбару остальные стили:
#content {
width: 780px;
height: 700px;
padding: 20px;
border: 1px solid black;
}
#sidebar {
width: 200px;
margin-right: 20px;
padding: 20px;
border: 1px solid black;
}Все, наш макет готов. Соберем весь код вместе:
<div id="wrapper">
<div id="header">
header
</div>
<div id="container">
<div id="sidebar">
sidebar
</div>
<div id="content">
content
</div>
</div>
<div id="footer">
footer
</div>
</div>* {
box-sizing: border-box;
}
#wrapper {
width: 1000px;
margin: 30px auto;
border: 1px solid black;
}
#header {
height: 200px;
padding: 20px;
border: 1px solid black;
}
#container {
display: flex;
}
#content {
width: 780px;
height: 700px;
padding: 20px;
border: 1px solid black;
}
#sidebar {
width: 200px;
margin-right: 20px;
padding: 20px;
border: 1px solid black;
}
#footer {
height: 200px;
padding: 20px;
border: 1px solid black;
}