Знакомство с CSS / Создание сетки страницы [7/15]

Уже 5 часов не могу понять, как создаются эти сетки . Просто не понимаю логики их создания, как они работают

Вот ситуация по дефолту

Вот я вставил свойство float: left; в класс left-column. И что же получилось? Этот блок " Основное содержание страницы" никуда в лево не переместился, а почему то класс right-column Боковая колонка стал меньше ! Где тут логика ?

А вот потом класс.right-column боковая колонка я добавил ему float: right; то он уже переместился в право как я и задал Как вообще это работает ? Обьясните если не трудно тормозу…уже весь день не могу понять. Стал нервничать и голова болит ) Заранее спасибо

А куда блок может сместиться, если он и так слева находится? Вот и остался на своем вроде бы месте.
А боковая колонка меньше не стала. Она “спряталась” под блок “Основного содержания”.

Блок по умолчанию занимает всю строку, то есть даже если справа визуально места для второго блока есть, блоки все равно будут стоять “в столбик”. Это стандартная блочная модель.
Когда вы задаете блокам свойства float, вы меняете это поведение по умолчанию.
Но чтобы два блока могли располагаться в одной строке, то float надо задавать обоим блокам.
Не переживайте. Подробнее о построении сеток вы еще узнаете в курсе “Сетки”.

1 лайк