Многоколоночная верстка на HTML и CSS

Здесь мы организовали 2-х колоночную верстку. Прием заключается в том, что мы использовали два блочных элемента (абзаца), которые сделали плавающими при помощи свойства float (см. код таблицы стилей). Но дело в том, что плавающие элементы выпадают из общего потока и поэтому не влияют на высоту родительских элементов, что приводит к наползанию контента друг на друга и проблемам при расчете высот. Чтобы обойти такие неприятные моменты, мы поместили наши блоки, которые служат колонками, в блок-обертку и добавили после них дополнительный пустой блок-подпорку, которому запретили обтекание плавающих вверху элементов. В результате такого приема блок-подпорка займет всю доступную ширину блока-обертки, не имея при этом высоты, и будет располагаться под самой высокой колонкой, подгоняя тем самым и высоту блока-обертки.

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

Кстати, данный прием мы использовали для верстки нашего сайта стишков с черным юмором. Там левая колонка представляет собой боковое меню сайта, а правая служит блоком содержания для самих стишков. При этом в независимости от того, какая колонка выше, складывается впечатление, что колонки одинаковые по высоте. Это достигается фоном их блока обертки, который имеет разные цвета, соответствующие фонам колонок, а также наличием блока-подпорки, который подстраивает высоту блока-обертки под высоту наибольшей из колонок.