Трехколоночный макет на CSS с одинаковой высотой колонок

Представляю Вашему вниманию еще один 3-хколоночный макет страницы, реализованный с помощью XHTML и CSS. Вот так он выглядит в миниатюре: Особенности: Оба сайдбара (левая и правая колонки) расположены с правой стороны. Такой тип страницы сейчас очень популярен, он используется на многих блогах. HTML-код ...

Комментарии (27)
  1. 1

    Оба сайдбара (левая и правая колонки) расположены с правой стороны.

    Звучит дико :)
    Лично я против использования раскраски через border. По эстетическим причинам и по причинам проблемного редизайна таких макетов.

    • 2
      void

      делать раскраску блоков рамкой это жесть)) согласен, зачем так мучиться чтобы сделать каркас страницы на дивах мне непонятно, что мешает сделать каркас таблицей?

      • 3
        Shustry
        @

        Да простит их гуру вёрстки, ибо не ведуют дети, что лепечут :)
        А способ реальный. Сам его давно юзаю. Есть другое решение: использовать бэкграунд для родителя, который уже 100% в высоту (например body). Но способ с бордерами мне, лично, больше нравицо. Во первых не нужен лишний файл-бэкграунд. Во-вторых, кошерней смотрицо в режиме «без графики».
        Пример, где я использовал: laysa.ru

  2. 4

    Не вижу ничего проблемного в редизайне макетов такого типа.

  3. 5
    ASh
    @

    Я, конечно, тоже поддерживаю мысль, что, по сути, использование бордера как места под колонку нелогично и вообще (действительно) дико. Но на практике мы действительно имеем проблему с кроссбраузерной версткой трехколоночной страницы. Те же отрицательные отступы аналогично должны быть названы «дикими». Поэтому, пусть каждый для себя решает, что он будет использовать в жизни. Я думаю и этот способ имеет право на жизнь если он реально работает. А вам, Dimox, спасибо за хорошо описанный вариант.

  4. 6

    Я, конечно, понимаю нелогичность такого метода разметки. Но дивовая верстка не дает возможность использовать такие же средства представления страницы, как с помощью таблиц (виной все та же пресловутая кроссбраузерность), например, вытягивание на вcю высоту экрана, поэтому, используя дивы приходится применять различные трюки, чтобы получить нужный эффект. ИМХО, с CSS2 это неизбежно. И в этом нет ничего страшного.

    ASh, пожалуйста ;).

  5. 7
    @

    Это конечно оригенально, но я не думаю, что подобный макет подойдет не под любой контект. Поэтому массово использовать я бы его не советовало, да и трудности с ним будут, но если ваш контент идеально вписывается в такой расклад, то почему бы и нет!

  6. 8

    Мангуст, не все, что предлагается — для массового использования.

  7. 9
    Взлом-щик

    А если сделать ширину не фиксированного размера а 100%, все колонки останутся на своих местах? Не люблю, когда меня искусственно ограничивают и загоняют в определенные рамки…, это всеравно что написать на сайте: «сайт нормально отображается только через Internet Explorer»

  8. 10

    Да, конечно колонки останутся на своих местах.

  9. 11
    @

    Что-то подобное делал не давно, но без кидания на бордюр :)
    Получается, чуть проще, с минимальным количеством контейнеров.

    http://trifler.ru/blog/post_1195143636.html

  10. 12
    @

    Наезд текста на картинку на реальном сайте надо поправить :)

  11. 13

    gordi, я когда и верстал, и писал эту статью, вспоминал тебя, потому что у меня практически то же самое получилось :)

    И еще. Я хотел показать этот вариант именно с использованием бордюров.

  12. 14
    @

    Как ты наверно помнишь, делал с border-ом дизай для LastoBlog :)
    Мороки там было не меряно :)
    Сейчас думаю на резиновый контент переходить.
    С Вадимом, уже обсуждал этот вопрос.
    Слишком уж у него дизайн узнаваем :)

  13. 15

    Да, помню, конечно. Бордюров там немеряно ))). Так у него еще в самом начале типа резинового и был диз.

    На счет узнаваемости — как он может быть не узнаваем, если блог популярен? Или ты имешь в виду, что схожие дизы используются на многих других сайтах?

  14. 16
    @

    >Так у него еще в самом начале типа резинового и был диз.
    Так то еще на таблицах было :)
    Практически все используют диз по дефолту.
    Клонов пруд пруди, лень наверное самим, что либо менять
    или не могут, работает и ладно :)

  15. 17

    Во всем сказанном согласен с тобой.

  16. 18
    Владимир
    @

    Это все хорошо, конечно, но…
    Столкнулся сейчас с такой же проблемой, но ещё осложненной тем, что футер должен быть всегда прилеплен к низу.
    Может подскажете, что-нибудь?

  17. 19

    Владимир, в этой статье описаны возможные способы.

  18. 20
    @

    И здесь можно посмотреть:
    http://trifler.ru/blog/post_1213471601.html

    Продолжение:
    http://trifler.ru/blog/post_1213870726.html

    Не без нюансов, но все рабочее.

  19. 21
    Владимир
    @

    Спасибо, почитаем!

  20. 22

    Спасибо — скачал оба дизайна. С версткой на DVD у меня пока не очень(