Создание 2-колоночного div-лейаута: левая жидкая, правая фиксированная

Быстрый ответ

Создайте адаптивный двухколоночный макет для ваших проектов с помощью CSS Flexbox. Левая колонка будет занимать все свободное пространство, тогда как правая колонка останется фиксированной ширины — 200 пикселей. Самый простой способ достичь этого выглядит так:

<div style="display: flex;">
  <div style="flex: 1; background: lightblue;">Левая колонка</div>
  <div style="width: 200px; background: orange;">Правая колонка</div>
</div>

Адаптивность при помощи медиазапросов

Вы создали двухколоночный макет, но что, если он не подстраивается под размер экрана? Использование медиазапросов поможет вашему сайту великолепно выглядеть на любых устройствах:

@media screen and (max-width: 600px) {
  .container {
    flex-direction: column;
  }
}

Когда ширина экрана меньше 600 пикселей, макет переключится на одноколоночный.

Альтернативные сценарии работы с CSS

У CSS множество различных трюков. Опробуем некоторые альтернативы:

1. CSS Grid: это мощный инструмент для управления компоновкой:

.grid-container {
  display: grid;
  grid-template-columns: auto 200px;
}

2. Floats: этот старый метод по-прежнему может быть полезным:

<div style="float: left; width: calc(100% – 200px);">Левая колонка</div>
<div style="float: right; width: 200px;">Правая колонка</div>

Использование calc() для высшего понимания макета

Добавьте немного магии в ваши стили с помощью функции calc(), которая позволяет вычислять выражения прямо в CSS. Вот как просто сделать ваш CSS любимым:

.left-column {
  width: calc(100% – 200px); /* Ваша резиновая колонка подстроилась как надо */
}
.right-column {
  width: 200px;
}

Управление переполнением содержимого

Управляйте переполнением содержимого, поддерживая в чистоте структуру макета, с помощью overflow: hidden:

.container {
  overflow: hidden; /* Позаботьтесь о рамках контейнера */
}
.left-column {
  overflow: auto; /* Переполнение контролируемо. Просто и эффективно */
}

Применение overflow: hidden для контейнера помогает удерживать блоки колонок на своих местах.

Визуализация

|------------------------------------------------------|-----|
|                      🚂 Чух-чух!                      | 🚃  |
| (Левая колонка адаптирована и тянется, как кошка)     |ПОСТ-
| (Расширяется, подобно йогу на рассвете)              |ОЯННА
|------------------------------------------------------|-----|

Ваш «поезд гибкости» (🚂) символизирует колонку с изменяемой шириной, способную подстраиваться при необходимости. Неподвижный вагон (🚃) представляет фиксированную ширину и не сдвигается при изменениях.

Как укладывать блоки с соблюдением дисциплины

Плавающие элементы и отступы – идеал гармонии и порядка

Используйте clearfix, чтобы плавающие элементы не выходили за пределы контейнера:

.clearfix::after {
  content: "";
  display: table;
  clear: both; /* Как Моисей разделяет моря */
}

Управление отрицательными полями

Смотрите, как ваш макет управляет акробатическими трюками полей и отступов с отрицательным значением поля:

.sidebar {
  margin-left: calc(-200px + 1em); /* Немного магии для корректировки */
}

Таким образом создается необходимое пространство для боковой панели, учитывая отступы и границы.

Полезные материалы

1. Полное руководство по Flexbox | CSS-Tricks — Отличный ресурс для тех, кто хочет полностью понять и начать работать с flexbox.
2. Основные концепции Flexbox – CSS: Каскадные таблицы стилей | MDN — Подробный разбор принципов работы flexbox.
3. CSS Flexbox (Гибкий бокс) — Примеры и уроки для быстрого освоения основ работы с Flexbox.
4. Полное руководство по CSS Grid | CSS-Tricks — Всё, что нужно знать о CSS Grid: новый уровень возможностей в верстке.
5. Сеточная компоновка CSS – CSS: Каскадные таблицы стилей | MDN — Полное руководство по мощному инструменту для создания сеток.
6. Адаптивный веб-дизайн: что это такое и как с этим работать — Smashing Magazine — Узнайте, как создавать и использовать адаптивные сетки.
7. Как создать двухколоночный макет — Пошаговое руководство по созданию адаптивного двухколоночного макета.