Если вам нужно создать верстку веб-страницы с отдельно находящимися текстами, которым не нужно перетекать между колонками, то код CSS довольно прост. Используя простой дизайн как основу, оберните каждую отдельную колонку текста в блок:

<div id="col1">
        <p>Hey, did you know that the modern necktie originates in the cravats worn by Croatian mercenaries during the Thirty Years War almost four hundred years ago? From that kick-ass origin, ties have become the sartorial choice of dandies, fops, and Organization Men of all stripes. Boring!
        <p>While we don’t make ties that are capable of staunching aortal bleeding from a musket-ball wound, our extra-skinny, super-strong ties could be used as a garrotte – or a tourniquet, if you wished.
        <p>Lorem ipsum dolor sit amet…
</div>

После этого просто задайте всплытие одной колонки рядом с другой:

div#column1 {
        width: 40em;
        float: left;
}
div#column2 {
        margin-left: 42em;
}

Здесь используется тот же способ, что и для размещения одной колонки рядом с изображением с подписью. Также можно задать обеим колонкам одинаковую изменяющуюся ширину:

div#column1 {
        width: 45%;
        float: left;
}
div#column2 {
        margin-left: 50%;
}

Но с этим способом есть несколько проблем. Сложно задать обеим колонкам одинаковую высоту, и расположить по вертикали верх колонок может быть непросто. Из-за этого часть веб-разработчиков разочарованно возвращается к использованию таблиц, но это не является единственным решением.

Отображение в виде таблицы

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

Нам не нужно использовать именно таблицу для создания сайта: это неправильно с точки зрения структуры сайта и сложно в поддержании. Таблицы нужны именно для создания таблиц с данными. Нам нужно, чтобы наши блоки вели себя, как таблицы, и отображали содержимое, как ячейки таблиц.

Этого просто добиться с помощью CSS:

div#column1, div#column2 {
        display: table-cell;
        width: 50%;
}

Оба эти блока теперь одинаковой высоты. Высота всех блоков со свойством display: table-cell (отображения в виде ячейки таблицы) определяется по самому высокому блоку. Это можно увидеть, добавив рамку или цвет фона обоим элементам блока:

div#column1, div#column2 {
        display: table-cell;
        width: 50%;
        padding: 2em;
        border-bottom: 5px solid black;
}

Автор урока Dudley Storey

Перевод  — Дежурка

Смотрите также:

• Создание различной маркировки для списков
• Создание оформленных нумерованных списков с использованием CSS
• Создание необычных непрямоугольных веб-дизайнов