Урок 235 із 239
98%
← Назад

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

Створюємо двоколоночний макет сайту за допомогою HTML-структури та Flexbox для розташування контенту і sidebar.

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

Двоколоночний макет — це структура сайту, у якій основний контент та бокова панель розташовані поруч в одному рядку.

Для створення такого макета будемо використовувати wrapper, header, container, content, sidebar та footer.

Структура 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>

Створення головного контейнера

Wrapper буде містити весь сайт. Задамо йому ширину та вирівняємо по центру сторінки.

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

Стилізація header і footer

Якщо блок не має вмісту, йому можна задати висоту. Якщо всередині є текст або інші елементи, висота формується автоматично.

#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

Padding та border збільшують фактичний розмір блоку. Щоб вони враховувалися всередині заданої ширини та висоти, використовуємо box-sizing.

* {
  box-sizing: border-box;
}

Розташування колонок через Flexbox

Щоб content і sidebar стали в один ряд, перетворимо container на flex-контейнер.

#container {
  display: flex;
}

Задаємо ширину колонок

Сума ширини колонок повинна відповідати ширині wrapper.

#content {
  width: 800px;
}

#sidebar {
  width: 200px;
}
#content {
  width: 780px;
}

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

Висота колонок

У Flexbox елементи одного рядка автоматично підлаштовують висоту один під одного. Тому достатньо задати висоту тільки одному блоку.

#content {
  width: 780px;
  height: 700px;
}

Фінальні стилі макета

* {
  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;
}
❗ Важливо:

Flexbox добре підходить для створення колонок у макетах, де елементи потрібно розташувати в один ряд.

  • wrapper обмежує ширину всього сайту.
  • container створює область для колонок.
  • display: flex розташовує блоки поруч.
  • content займає основну частину сторінки.
  • sidebar використовується для додаткової інформації.
  • box-sizing: border-box спрощує роботу з розмірами.
📌 Завдання:
  1. №1. Створіть макет з header, content, sidebar та footer.
  2. №2. Зробіть дві колонки через Flexbox.
  3. №3. Додайте відступ між content і sidebar.
  4. №4. Змініть ширину колонок та перевірте результат.
💡 Показати підказку

Якщо колонки не стають поруч, перевірте чи батьківський контейнер має display: flex.

✅ Показати відповідь
#container {
  display: flex;
}

#content {
  width: 780px;
}

#sidebar {
  width: 200px;
}