Верстка резиновых колонок на сайте через css float

Практически любой вебсайт использует колонки. Это может быть контент и сайдбар, новости в несколько колонок, вывод миниатюр фотогалереи и т.п. Оказывается для многих, эта регулярная задача вызывает затруднение. Решить её можно несколькими адекватными способами:

  1. Используя CSS свойство float (самый кроссбраузерный способ, про него и поговорим)
  2. Используя flexbox модуль (тоже уже вполне кроссбраузерный способ, на мой взгляд он еще проще, но я привык к первому способу)
  3. Используя Grid (поддержка браузерами еще не полная, но уже вот-вот, я им пока не пользовался)

Далее я расскажу о простом, безглючном, легко прогнозируемом в поведении решении для верстки колонок.

В свое время, я взял решение из bootstrap 3 и оно мне показалось на столько простым и логичным, что до сих пор использую. Вообще рекомендую подсматривать решения именно на популярных решениях.

И так, приступим. Например, нам нужно разбить страницу такими способами:

Для начала делаем html-разметку:

Обращаем внимание, что у нас все колонки вкладываются в один общий div с классом «wrap».

Далее начинаем задавать css стили блокам. Для начала первая хитрость — задаем всем блокам свойство box-sizing. (Полный код CSS в конце документа)

Это значит, что теперь у всех объектов в ширину и высоту включаются размеры полей отступов от содержимого контейнера padding и толщина рамки border. Если вы не можете это применить ко всем селекторам (*), то применяйте к каждой колонке. Но без этого свойства ничего не выйдет.

Далее вторая хитрость. Добавляем псевдоэлементам контейнера (в который вложены колонки) свойство clear: both. Это, чтобы после колонок прекращалось действие обтекания и верстка себя вела предсказуемо. Иначе у вас периодически будут строить «лесенки» и скорее всего «поедет верстка».

Далее, если нам нужны отступы между содержимым колонок, как на изображении ниже:

То добавляем следующий css код для контейнера .wrap с отрицательным margin. Это необходимо, чтобы потом содержимое колонок встало ровно по вашей сетке (слева в самой левой колонке и справа в самой право колонке). Про отступы поговорим более понятно в конце статьи.

Далее задаем css код для самих колонок. Начнем с двух одинаковых, с классом «col»:

Тут мы остановимся более подробно:

  1. float: left; — контейнер (колонка) выравнивается по левому краю, все остальные элементы обтекают его справа.
  2. padding: 0 15px; — Добавляет поля в 15 px слева и справа от содержимого контейнера (колонки). Это если нужны отступы между содержимым колонок (чтобы содержимое не соприкасалось). Потом подробнее объясню.
  3. width: 50%; — Ширина нашей колонки, относительно доступного места. Соответственно все доступное место — 100%. 50% — это половина. Само собою, сумма ширины всех колонок не должна быть более 100%.

Для трех одинаковых колонок мы задаем ширину 33,3% (да, можно не целое число):

Для 3 колонок (крайние одинаковые, средняя отличается) мы задаем два класса:

Хочется сразу обратить внимание на название классов колонок внутри одного проекта. Рекомендую их называть так, чтобы было понятно сколько они по ширине, не давать разные классы для одинаковых колонок. Например: не надо называть 2 одинаковые колонки с шириной 50% левая и правая (можно просто .col — как у нас, если других размерностей нет). Если по нашим названиям классов, то: .col-3 — (одна треть), .col-60 — (60%).

У bootstrap названия по количеству колонок сетки (но как только приходит понимание построения своей сетки и работе с адаптивностью — то bootstrap становится не нужен).

Полный css код для всех наших колонок на float:

Отступы между содержимым колонок:

Тут все просто, у колонок мы задаем padding слева и справа по 15px. Т.к. соседние колонки соприкасаются, то между содержимым получается расстояние 30px. А чтобы самая левая колонка и самая правая были ровно по родительскому контейнеру, то родительскому контейнеру .wrap мы задаем слева и справа отрицательные отступы margin в -15px (т.е. ровно по размеру padding). Далее постарался изобразить наглядно:

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *