ТЕКСТ В 2 КОЛОНКИ

Опытным верстальщикам наверняка будет известна подобная хитрость, но для начинающих веб-дизайнеров эта статья может оказаться полезной.

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

Решение, в общем-то, простое.

Берем слой #content с относительным позиционированием, в него помещаем другой слой (#content .txt_left), так же с относительным позиционированием. С помощью свойства padding-right прижимаем текст этого слоя к левому краю на ширину в 50% от общей ширины слоя "#content .txt_left" (которую, впрочем, лучше не указывать). Таким образом, у нас получилась левая колонка с шириной 50%. Но кроме всего проделанного желательно указать минимальную высоту слоев "#content" и "#content .txt_left" с помощью свойства "min-height". Десяти пикселей будет достаточно, остальное растянется :)

Теперь в слой "#content .txt_left" вставляем новый слой "#content .txt_right", но уже с абсолюстным позиционированием. Прижимаем этот слой к правому краю слоя "#content .txt_left". Указываем его ширину 50% и высоту 100%. Но вот незадача: во всех браузерах, кроме нашего "любимого" IE, расположение слоев будет 50%, а в IE последний слой окажется в половину меньше.

Для того чтобы избавиться от этого неприятного момента в CSS-файле пропишем еще _width:100%; для слоя #content .txt_right. Эта запись будет учитываться только браузером ИЕ.

Этот же прием используем для того, чтобы указать минимальные высоты слоев, ведь, как известно, IE не подерживает свойства min-width и min-height.

Ширину слоев мы указали в процентах, обеспечив тем самым резиновость нашим колонкам. Если необходимо, проценты можно заменить на более точные единицы измерения.

ВАЖНО: Высота правого слоя (количество текста) должна быть меньше высоты левого слоя. В противном случае лишний текст просто выйдет за пределы нижней границы.

Если контент в таких колонках будет динамически меняться, то необходимо будет устанавливать скрипт подсчета символов статьи и разбиения ее на две части. Правда возникнет проблема со вставкой в колонки изображений.

Колонки готовы.



Автор статьи: TecHMeat

Источник: techmeat.net

Использование статьи разрешено только с разрешения автора!!!