Главная CSS-верстка

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

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

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

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

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

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

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

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

      Удачи.

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

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

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

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

  3. Александр
    14 лет назад

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

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

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

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

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

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

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

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

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

  7. Есть в этом макете один минус, который однако в некоторых случаях делает его непригодным к использованию. Если закомментировать (либо удалить) из 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 остаются не у дел, а это в большинстве случаев не приемлемо.

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

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

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

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

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

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