Данный топик — это не изложение азов на тему «Как сделать на своей странице две колонки с использованием div'ов и css». Передо мной стояла задача разбить монолитный текст на две колонки, подобно тому, как это делает MS Word. Стандартного тэга в css для этого не существует, поэтому пришлось немного потанцевать с бубном для решения поставленной задачи.
Ширина колонки с текстом очень сильно влияет на простоту восприятия информации пользователем. И поэтому, учитывая нынешнюю популярность широкоформатных мониторов, разбивка текста на колонки существенно увеличивает его «читабельность».
Для разбивки текста на колонки использовались css и немножко javascript'а. Сам алгоритм разбивки состоит всего из четырех шагов:
Шаг 1.
Создаем блок для текста (в примере он называется «News») и помещаем в него два блока, в которых и будет распологаться наш текст. Весь текст пока что находится в первой колонке.
Простите за мой
Шаг 2.
Первым шагом мы весь текст загнали в первую колонку Col1. Теперь javascript'ом копируем весь текст во вторую колонку (на иллюстрациях текст специально сделан градиентом, чтобы в дальнейшем можно было определить, где его верхняя часть, а где нижняя):
Шаг 3.
Все тем же javascript'ом определяем нынешнюю высоту колонок Col1 и Col2. Колонке Col2 задаем отрицательный margin. Margin должен быть равен ровно половине высоты колонки. Тем самым мы поднимаем вторую колонку вверх, оставляя видимой только ее нижнюю половину:
Шаг 4.
Задаем общему (желтому) блоку текста высоту, равную половине высоты колонки. Остальное обрезаем при помощи свойства overflow:hidden.
И смотрим результат.
Вместо заключения
Более сложная задача — вставить в этот текст изображение или видео, если оно попадает ровно на середину текста, или же если его ширина превышает ширину одного столбца. Согласитесь, нелепо будет выглядеть фото, если половина его располагается в нижней части первой колонки, а вторая половина — вверху второй.
Передо мной не стояла задача реализовать такой вариант, но по идее и это решается. Все изображения должны иметь аттрибут position: absolute, а внутри колонок при помощи javascript'а необходимо будет создавать пустые элементы с размерами и координатами точно под изображение с relative position (иначе текст скроется ПОД изображениями).