Как сделать макет в две колонки на CSS?

Сегодня две колонки делают через flexbox или grid — это надёжнее старых float. Самый простой вариант — flex:

<div class="layout">
  <aside class="sidebar">Меню</aside>
  <main class="content">Основной контент</main>
</div>

.layout {
  display: flex;
  gap: 24px;
}
.sidebar {
  flex: 0 0 240px; /* фикс. ширина 240px, не сжимается */
}
.content {
  flex: 1;         /* занимает всё оставшееся место */
}

Разбор: flex: 0 0 240px означает «не расти, не сжиматься, базовая ширина 240px» — стабильный сайдбар. flex: 1 у контента — «забери всё остальное». Колонки автоматически становятся равной высоты, ничего не проваливается, как с float.

Если колонки равные (50/50) — обоим поставьте flex: 1.

Через grid ещё нагляднее:

.layout {
  display: grid;
  grid-template-columns: 240px 1fr; /* сайдбар + резиновый контент */
  gap: 24px;
}

Для адаптивности сложите колонки в столбик на телефоне:

@media (max-width: 700px) {
  .layout { flex-direction: column; } /* или grid-template-columns: 1fr; */
}

Float для раскладки сейчас почти не используют — он создавал проблемы со схлопыванием и требовал clearfix.