Опытным верстальщикам наверняка будет известна подобная хитрость, но для начинающих веб-дизайнеров эта статья может оказаться полезной.
К сожалению, 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
Использование статьи разрешено только с разрешения автора!!!