Верстка текста в две колонки на чистом CSS

    Данный пост навеян моим же предыдущим топиком, в котором монолитный текст делился на две колонки при помощи JS. В комментах прозвучала фраза типа «С JS и дурак сделает, вот бы на чистом CSS».
    Алгоритм не изменен, суть остается та же. Практической пользы от топика — 0, вряд ли такой метод будет применяться в реальных проектах. Just for fun, как говорится.
    Смотрим что получилось
    Под катом код...
    <div id="Center"'>
    <div id="News"'>
    <div class="Column" id="Col1"'>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution.<br/>
    2Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution.<br/>
    <span class="Zagl1"'>
    </span'>
    </div'>
    <span class="Col2"'>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution.<br/>
    2Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution.<br/>
    </span'>
    </div'>
    </div'>


    И собственно CSS:

    #News {
    position : relative;
    overflow : hidden;
    top : 33%;
    }

    #News P{
    margin : 0px;
    }

    #Col1 {
    width : 260px;
    margin-right : 40px;
    text-align : justify;
    float : left;
    }

    #Col1 span.Zagl1 {
    display : block;
    width : 260px;
    height : 1000px;
    position : absolute;
    top : 50%;
    background : #f00;
    }

    #News span.Col2 {
    width : 260px;
    text-align : justify;
    position : absolute;
    top : -50%;
    left : 50%;
    float : left;
    }

    Комментарии 7

      +7
      column-count:2?
        +2
        CSS3.0?
        +1
        Стоит немного поменять количество текста и способ больше не работает.

        image
          –1
          Да, без JS кратность строк (их четность, точнее) никак не обойдешь. Никто же не говорит, что надо так делать. Просто, пример верстки.
            –1
            Кроме того, можно увеличить line-height или уменьшить font-size, тогда при нечетном количестве строк в первой колонке артефактов видно не будет. Просто «зебра» нарушится, строки во второй колонке будут идти выше, чем в первой
            –1
            Я вот не понимаю зачем создавать код, который не будет применяться на практике. Это как готовить суп, который никто не будет есть.
              0
              > Just for fun, как говорится

            Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

            Самое читаемое