Схема двухколоночного макета сайта в CSS

Давайте сделаем двухколоночный макет следующего вида:

Для начала создадим основную структуру страницы:

html<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>

Теперь назначим стили врапперу, выровняв его по центру экрана:

css#wrapper {
  width: 1000px;
  margin: 30px auto;
  border: 1px solid black;
}

Зададим теперь стили хедера и футера:

css#header {
  height: 200px;
  border: 1px solid black;
}
#footer {
  height: 200px;
  border: 1px solid black;
}

Как вы видите, мы задаем хедеру и футеру высоту. Мы делаем это, как как в нашей схеме у них нет содержимого. При наличии содержимого высоту блокам задавать не стоит - она будет формироваться их содержимым.

Обратите также внимание на то, что мы не задаем им ширину. Дело в том, что хедер и футер - блочные элементы и их ширина будет автоматически равна ширине враппера.

Давайте теперь зададим им padding, чтобы текст не прилипал к границам:

css#header {
  height: 200px;
  padding: 20px;
  border: 1px solid black;
}
#footer {
  height: 200px;
  padding: 20px;
  border: 1px solid black;
}

Наличие paddingа, однако, плохо повлияет на размеры блоков - они станут больше, чем указано. Давайте изменим поведение всех блоков так, чтобы padding и границы не расширяли наши блоки:

css* {
  box-sizing: border-box;
}

Теперь нам нужно поставить контент и сайдбар в один ряд. Сделаем это с помощью флексов:

css#container {
  display: flex;
}

Укажем контенту и сайдбару их ширину. При этом сумма их ширин должна быть равна ширине враппера:

css#content {
  width: 800px;
}
#sidebar {
  width: 200px;
}

Пусть мы хотим сделать отступ между сайдбаром и контентом. В этом случае сайдбару нужно поставить margin. При этом нам придется от кого-то отщипнуть ширину для этого margin. Отщипнем от контента, соответственно уменьшив его ширину:

css#content {
  width: 780px;
}
#sidebar {
  width: 200px;
  margin-right: 20px;
}

Давайте теперь добавим высоту, так как наши элементы не содержат содержимого. Достаточно добавить высоту только одному элементу, ведь второй флекс элемент подстроится по высоте (почему?). Давайте зададим высоту контенту:

css#content {
  width: 780px;
  height: 700px;
}
#sidebar {
  width: 200px;
  margin-right: 20px;
}

Давайте добавим контенту и сайдбару остальные стили:

css#content {
  width: 780px;
  height: 700px;
  padding: 20px;
  border: 1px solid black;
}
#sidebar {
  width: 200px;
  margin-right: 20px;
  padding: 20px;
  border: 1px solid black;
}

Все, наш макет готов. Соберем весь код вместе:

html<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>

css* {
  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;
}