Как сделать 2 колонки в css

Существует несколько способов создания 2-х колоночной верстки в CSS. Рассмотрим два из них:

1. Использование float.

Этот метод основан на использовании CSS свойства float. С помощью float можно выровнять блоки по левому или правому краю, создавая эффект «плавающих» элементов.

HTML:

<div class="wrapper">
  <div class="column column-left">Левая колонка</div>
  <div class="column column-right">Правая колонка</div>
</div>

CSS:

.wrapper {
  width: 100%;
  overflow: hidden;
}

.column {
  float: left;
  height: 300px;
  padding: 20px;
  box-sizing: border-box;
}

.column-left {
  width: 30%;
  background-color: #f1f1f1;
}

.column-right {
  width: 70%;
  background-color: #c0c0c0;
}

2. Использование Flexbox.

Flexbox — это новый способ создания гибких и адаптивных версток с использованием CSS свойств display: flex и flex-wrap.

HTML:

<div class="wrapper-flex">
  <div class="column-flex column-left-flex">Левая колонка</div>
  <div class="column-flex column-right-flex">Правая колонка</div>
</div>

CSS:

.wrapper-flex {
  display: flex;
  flex-wrap: wrap;
}

.column-flex {
  height: 300px;
  padding: 20px;
  box-sizing: border-box;
}

.column-left-flex {
  flex-basis: 30%;
  background-color: #f1f1f1;
}

.column-right-flex {
  flex-basis: 70%;
  background-color: #c0c0c0;
}

Оба способа имеют свои преимущества и недостатки. Метод float может вести к проблемам с выравниванием блоков при изменении размеров экрана, в то время как Flexbox обеспечивает более гибкую и адаптивную верстку. Выбор метода зависит от ваших потребностей и предпочтений.