Опытным верстальщикам наверняка будет известна подобная хитрость, но для начинающих веб-дизайнеров эта статья может оказаться полезной. К сожалению, CSS2 не поддерживает верстку колонками, а CSS3 только на подходе и еще точно не известно, как в нем будет организована эта функция. Да еще должно будет пройти некоторое время, прежде чем браузеры полноценно научатся обрабатывать CSS3. Поэтому попытаемся сверстать страничку двумя колонками в CSS2.
Решение, в общем-то, простое.
Code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
#content{
position: relative;
width: 70%;
min-height: 10px;
_height: expression(((document.documentElement.clientHeight||document.body.clientHeight)<=1024)? 10:"100%");
right: 0;
border: 1px solid #999;
}
#content .txt{
position: relative;
left: 0px;
}
#content .txt_left{
position: relative;
min-height: 10px;
_height: expression(((document.documentElement.clientHeight||document.body.clientHeight)<=1024)? 10:"100%");
left: 0px;
padding-right: 50%;
}
#content .txt_right{
position: absolute;
width: 50%;
_width: 100%;
height: 100%;
right: 0px;
border-left: 1px dashed #666;
}
</style>
</head>
<body>
<div id="content">
<div class="txt">
<div class="txt_left">
<img src="images/1.gif" width=100 height=100 alt="Картинка" style="float:left;" / >
<p>Текст левой колонки</p>
<div class="txt_right">
<p>Текст правой колонки</p>
</div>
</div>
</div>
</div>
</body>
</html>
Берем слой #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%. Но вот незадача: во всех браузерах, кроме нашего "любимого" Internet Explorer, расположение слоев будет 50%, а в IE последний слой окажется в половину меньше.
Для того чтобы избавиться от этого неприятного момента в CSS-файле пропишем еще _width:100%; для слоя #content .txt_right. Эта запись будет учитываться только браузером Internet Explorer.
Этот же прием используем для того, чтобы указать минимальные высоты слоев, ведь, как известно, IE не подерживает свойства min-width и min-height.
Ширину слоев мы указали в процентах, обеспечив тем самым резиновость нашим колонкам. Если необходимо, проценты можно заменить на более точные единицы измерения.
ВАЖНО: Высота правого слоя (количество текста) должна быть меньше высоты левого слоя. В противном случае лишний текст просто выйдет за пределы нижней границы.
Если контент в таких колонках будет динамически меняться, то необходимо будет устанавливать скрипт подсчета символов статьи и разбиения ее на две части. Правда возникнет проблема со вставкой в колонки изображений.
Колонки готовы.
Ниже ссылка на скачку...там готовый пример
Скачать Текст в 2 колонки
