Текст в 2 колонки

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

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

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

 <!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.Ширину слоев мы указали в процентах, обеспечив тем самым резиновость нашим колонкам. Если необходимо, проценты можно заменить на более точные единицы измерения.

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

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

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

Посмотреть пример

Скачать готовый пример

Размещено в CSS, HTML.

В этом блоке кнопочки для кликания на случай, если пост оказался полезным :)
  • ALexS

    для динамического текста есть готовый скрипт на jquery для разбиения текста на колонки
    http://welcome.totheinter.net/columnizer-jquery-plugin/

  • спасибо пригодится

  • Avva99

    стебаемся? top:0; в #content .txt_right не добавлен. замануха такая, чтобы писали тут? фаербагом-то видно, в примере есть. а я убил минут 30ю очень френдли. если бы я так AS3 писал то ))).

  • Серж

    как реализовать вот это http://htmlbook.ru/content/maket-iz-dvukh-kolonok чтобы html или текст были во фрейме как Пример 1. Ширина колонки в пикселах

  • Жером

    Спасибо!