# Схема двухколоночного макета сайта в 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; }`
← →
↑