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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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