Верстка трехколоночного макета страницы с помощью CSS

В тот момент, когда я стал переходить на дивовую верстку, а произошло это почти год назад (как быстро летит время), одним из серьезных уроков, которые я должен был освоить, был простой и удобных способ верстки трехколоночного макета страницы с использованием <div>‘ов и каскадных ...

Комментарии (42)

  1. Все примеры изначально работают.
    Не однократно проверены в боевых условиях.
    Аккуратность и внимательность не повредит :)

  2. Спасибо огромное! Давно искал хороший дивовый шаблон и тут — такой подарок:)

  3. Жаль, фоны колонок не растягиваются на всю высоту центрального блока…

  4. Ну так а как растянуть все это на высоту 100% ?
    И можно ли это сделать вообще (для IE6+ FF2+ одновременно совместимым) ?
    Помоему таблицы проще и универсальнее в этом плане.
    Спасибо.

    • Ровно сверху над твоим комментом есть пример с высотой на 100%, я оставлял раньше.

      http://www.strictlycss.com/examples/fluid-css-layout-with-faux-columns-1.asp

      Или вот подборка:
      http://pmob.co.uk/temp/3colfixedtest_explained.htm

      Безусловно, таблицами легче. Безусловно, не универсальние, ибо местами ячейки таблицы средствами CSS ты в произвольном порядке не переставишь. Универсальность — суть DIV’ной вёрстки :-)

      Удачи.

      • Ну тогда скажи как мне в твоем примере
        (http://www.strictlycss.com/examples/fluid-css-layout-with-faux-columns-1.asp)
        вставлять маленькие рекламные баннеры в правую и левую колонки так чтоб они были всегда внизу в колонках. Содержимое то что вверху колонок должно там же и оставаться.
        Растяжка по ширине и высоте должна сохраняться.
        Покажи универсальность.

  5. Люди, помогите пожалуйста. Пытался по этому шаблону разбить на блоки как на этом сайте Но ни как не получается и в общем итоге уже запутался где какой блок должен быть… ((( Если это кому то будет не трудно, можете накидать макет из обычных блоков (без всякого оформления) только чтобы каждый блок хоть по цветам отличался.

    Этот сайт конечно не блочный, а мне хочется разобраться в построении блочного сайта с большим вложением блоков.

    Спасибо! Если не трудно на е-майл ссылку или код stanlybsv{собака}yandex.ru

  6. Все хорошо…но пример не для начинающих ибо в тексте html даже (наверное по спешке) css не подключили:)

  7. А может кто нибудь объяснить как действуют отрицательные марджины? вот никак не дойдет, куда же все таки сдвигается блок при margin-left:-100%. При этом если третьему блоку не задать его сдвиг в margin-left:-250px, то ни один из них не покажется, как будто они друг от друга зависят ????

    • вот никак не дойдет, куда же все таки сдвигается блок при margin-left:-100%

      Данный блок как бы поднимается на этаж выше. Это происходит за счет margin-left:-100% для блока #left, плюс за счет float: left для блока #content. В результате этого блок контента и сайдбара встают на один уровень по горизонтали.

      При этом если третьему блоку не задать его сдвиг в margin-left:-250px, то ни один из них не покажется, как будто они друг от друга зависят ????

      Не знаю, как уж вы это проверяли, но у меня они не исчезают, да и не должны исчезать.

  8. Макет хороший, единственный недостаток этого макета в том что если макету задать максимальную ширину, то в ie 6 левая колонка улетает.

  9. Отлично! Я в пятницу сидел корпоративный сайт после программиста верстал :) Славные они люди, картинки не сжали, в таблицах сверстали, 1.5 мб при первой загрузке.

    В общем, верстал-верстал и понял что 3 колонки с 2 фиксированными у меня не получаются. Спасибо за пример, сколько лет прошло, а актуальность не теряет :)

  10. Есть в этом макете один минус, который однако в некоторых случаях делает его непригодным к использованию. Если закомментировать (либо удалить) из html-файла див с содержимым левой колонки, то контент так и останется висеть с огромным отступом слева.
    И собственно вопрос, как сделать, чтоб при удалении левой колонки (или правой) колонка контента автоматически занимала все отведенное ей пространство?

    • Никакой это не минус. Решается корректировкой всего одного стиля:

      #text {margin: 0 250px;}

      Если надо без левой колонки, то будет так:

      #text {margin: 0 250px 0 0;}
      • Ну это-то очевидно.
        Но речь о том, чтобы удалять столбцы совершенно без каких либо других правок. Например как в таблицах:

        
        <table>
           <tr>
              <td class="a">1</td>
              <td>2</td>
              <td class="a">3</td>
           </tr>
        </table>
        
        
        table {width: 100%;}
        .a {width: 250px;}
        

        Здесь если удалить первую колонку, то центральная автоматически займет ее место.
        Аналогичный эффект можно получить на дивах, используя display: table-cell, но ие6 и 7 остаются не у дел, а это в большинстве случаев не приемлемо.

  11. Жаль, что footer «в воздухе висит»…

  12. почему то когда css я перевожу в отдельный файл и подключаю

    то левая колонка и правая не отражается….
    т.е. если все на одной странице, то работает, а так не работает
    (я новичок)

  13. Cпассибо за урок! Три раза использовал в текущем сайте! Очень качественно. ВАш сайт в избранное!

  14. Я с этими тремя колонками намучилась, так до сих пор и не получается.

    • Глянь тут http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks
      Там поясняется технология с картинками — все колонки одной высоты.

      Так же тут куча примеров:
      http://www.pmob.co.uk/temp/3colfixedtest_explained.htm

      Попробуй bootstrap, там всё на базовом уровне реализовано круто, может быть достаточно. Но есть свои минусы — достаточно трудно сделать колонки одной длины. Я сделал, скоро где-то выложу статью на эту тему. (-:

      Вообще, писк моды сейчас bootstrap. По сути это ты подключаешь файл CSS и, давая DIVам определённые классы, творишь чудеса.

  15. Здесь есть практически все, что нужно, с массой примеров — http://csslayout.ru/