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

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

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

    Возможно, единственным недостатком, является то, что колонки не одинаковой высоты.
    В своих шаблонах, решал эту проблему иначе.
    Но там тоже минус сложности с резиной.

  2. 2

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

    А твое решение высоты колонок мне очень понравилось (помню статью), только, действительно, оно подходит лишь для фиксированной ширины.

  3. 3
    @

    Отличный способ. Небольшое замечание: width: 100%; для #wrapper и #container ,
    лишнее. И так растянется)

  4. 4

    webvector, для #wrapper, возможно, и не обязательно, но для #container требуется. Причину я описал в статье.

  5. 5
    Хомячина

    Классно, спасибо за советы!

  6. 6
    @

    Нигде не могу найти , что значит конструкция
    * {margin: 0;padding: 0; font: 14px/17px «Trebuchet MS», Tahoma, Arial}
    в определении стиля.

    Если не сложно, скиньте ссылку, где это можно почитать на мейл losk@onego.ru

  7. 7

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

    Ссылку не знаю, поищите по ключевым словам «обнуление стилей».

  8. 8
    juice

    Спасибо! Только что воспользовался, за полчаса переверстал старый проект, стало гораздо лучше :)

  9. 9

    Неплохой шаблон, кратко и заточено под раскрутку. А проблема с разной высотой цветных колонок легко решается использованием графического бэкграунда для блоков container и/или body/html. Задается бэкграунд для левой и правой частей отдельно, с шириной картинки равной ширине боковой колонки.

  10. 10
    Gruz
    @

    Подскажите, пожалуйста, как можно сделать колонки одинаковыми по высоте?
    Леву без проблем — подставляю рисунок фона #left и #container.
    Для правой подставляю её фон #right, а вот ниже колонки — как подставить?
    Пробовал ставить в контент и указывать отступ фона, но, само собой не вариант, ибо при растягивании плывёт. (по рецепту http://www.communitymx.com/content/article.cfm?page=2&cid=AFC58)

    ПОМОГИТЕ, плиз!

  11. 11
    @

    Можно так
    http://trifler.ru/blog/post_1213207881.html

  12. 12
    Gruz
    @

    gordi, ты наверное линк попутал. Та статья не об этом. Может дашь, который ты имел ввиду? Спасибо.

  13. 13

    Gruz, gordi дал правильную ссылку. В той статье есть ссылка на страницу с примерами — http://trifler.ru/blog/layouts2.html

  14. 14
    Gruz
    @

    Я видел ту страницу, но там всё немного не то. 3-хколоночный шаблон там не резиновый по ширине. :-(
    Нашёл по-моему именно то: http://www.pmob.co.uk/temp/3coltest-2.htm
    Но надо ещё проверить.

  15. 15

    Вот здесь еще рассматривается этот вопрос — http://blog.sjinks.org.ua/css/209-cross-browser-liquid-three-column-layout-full-height/

  16. 16
    Gruz
    @

    Большое спасибо! По-моему то, что надо. Читаю.

  17. 17
    @

    Gruz>Я видел ту страницу…
    А с чего вы взяли что она не резиновая?
    Область контента резиновая и это параметр регулируется.
    Или вам надо чтобы все колонки были резиновые?

  18. 18
    Gruz
    @

    Она в Лисице резиновая, а в ИЕ — нет (или наоборот). Я пробовал с разными параметрами.

  19. 19
    @

    В IE6(7), OPERA9.23, OPREA9.5, FF2.014, FF3
    Все, как и заявлено в статье.
    На странчке примера, специально показан блок с фиксированной шириной больше заданного min-width.
    В чем вы смотрите?

  20. 20
    Gruz
    @

    Мы говорим про этот пример?
    http://trifler.ru/blog/i/layouts/example/left_content_right.htm
    В этом виде он фиксированный.
    уменьшил min-height до 770 пкс.
    А максимальный убрал. Вроде в ИЕ7 и ФФ3 нормально.
    Перед тем была проблемма, наверное что-то другое поменял. Спасибо большое!