Табличная и бестабличная вёрстка

CSS-вёрстка. Макет с двумя колонками

Переходя к большему числу колонок, будем применять позиционирование на основе плавающих элементов, при котором ширина колонок также может быть фиксированной или непостоянной. Следует очень внимательно следить за тем, чтобы суммарная ширина всех колонок не превысила 100% (при непостоянной ширине) или ширины общего контейнера (при фиксированной ширине). Иначе последняя колонка переместится вниз. Подсчитывая суммарную ширину, принимайте в расчёт значение свойства width колонки, а также padding и border и, если есть, margin. Разумеется, поля, границы и отступы учитываются с обеих сторон. С этим подсчётом связано следующее затруднение: как сложить, например, 50% и 2px? Решить его можно двумя способами: или пользоваться везде только одним способом измерения (пикселы либо проценты), или же оценить максимально возможную процентную долю пиксела, ограничив ширину макета. Например, если для глобального контейнера, содержащего весь макет, указано свойство min-width: 400px, то можно быть уверенным, что 4px не превосходят одного процента ширины макета.

В остальном идея проста: колонки снабжаются свойством float:left и указанием ширины, а также отступа и поля. При двух- и трёхколоночном макете необязательно делать плавающей центральную колонку (иногда это нежелательно) - вместо этого ей можно задать достаточные отступы слева и справа, а крайние колонки сделать плавающими - одну с float:left, а другую с float:right.

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

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

#frame {
      width: 85%;
      min-width: 400px;
      margin: 0 auto;
    }
    #col1 {
      float: left;
      width: 66%;
      padding-right: 4px;
      margin-right: 4px;
      border-right: 1px solid black;
    }
    #col2 {
      float: left;
      width: 30%;
      padding: 4px;
      background-color: #ddd;
    }
    #footer {
      clear: both;
      border-top: 1px solid black;
      padding-top: 5px;
      margin-top: 5px;
    }
  ...
  <div id="frame">

    <div id="col1">
      <h1>
        Заголовок страницы</h1>
      <p>
        Переходя к большему числу колонок, будем применять позиционирование на
        основе плавающих элементов...
      </p>
      <p>
        В остальном идея проста: колонки снабжаются свойством float:left и указанием
        ширины, а также отступа и поля...</p>
    </div>

    <div id="col2">
      <p>
        Задавая колонкам фоновые цвета, вы обнаружите, что, когда в колонке мало
        содержимого, заполненный фоном блок смотрится не вполне эстетично...</p>
    </div>

    <div id="footer">
      (c) Копирайт
    </div>

  </div>

#frame {
      width: 600px;
      margin: 0 auto;
      background-image: url(600px_220gray.png);
    }
    #col1 {
      float: left;
      width: 349px;
      padding-right: 10px;
      margin-right: 10px;
      border-right: 1px solid black;
    }
    #col2 {
      float: left;
      width: 220px;
      padding-left: 10px;
    }
    #footer {
      clear: both;
      border-top: 1px solid black;
      padding-top: 5px;
      background-color: White;
    }

CSS-вёрстка. Макет с тремя колонками. Асимметричный макет

Аналогичным образом строится и трёхколоночный макет.

body {
      background-color: #bbb;
    }
    #frame {
      width: 760px;
      margin: 0 auto;
      background-color: #eee;
    }
    #header {
      border-bottom: 1px solid black;
      padding: 5px;
      text-align: center;
    }
    #col1 {
      float: left;
      width: 200px;
      padding-left: 10px;
    }
    #col2 {
      float: left;
      width: 328px;
      padding-left: 10px;
      padding-right: 10px;
      margin-left: 10px;
      margin-right: 10px;
      border-left: 1px solid black;
      border-right: 1px solid black;
    }
    #col3 {
      float: left;
      width: 170px;
      padding-right: 10px;
    }
    #footer {
      clear: both;
      border-top: 1px solid black;
      padding: 5px;
      margin-top: 5px;
      text-align: center;
    }
  ...
  <div id="frame">

    <div id="header">
      <h1>
        Заголовок страницы</h1>
    </div>

    <div id="col1">
      <p>
        Левая колонка имеет ширину 200px и левое поле 10px.</p>
    </div>

    <div id="col2">
      <h2>
        Центральная колонка</h2>
      <p>
        Все 3 колонки - плавающие, и их суммарная ширина (вместе со всеми полями,
        отступами и рамками) равна 760px.</p>
      <p>
        Все секции помещены в один общий контейнер, которому задана ширина 760px
        и который центрирован горизонтально на странице.</p>
    </div>

    <div id="col3">
      <p>
        Правая колонка имеет ширину 328px, горизонтальные поля 10px, горизонтальные
        отступы 10px и однопиксельные сплошные рамки.</p>
    </div>

    <div id="footer">
      Нижний колонтитул имеет поле 5px, отступ сверху 5px и однопиксельную рамку
      сверху.
    </div>

  </div>

Необязательно, чтобы макет страницы представлял собой набор колонок, выстроенных в один ряд. Нередко встречается и "неправильный" дизайн - с произвольным размещением элементов - особенно, если на странице совсем немного содержимого. Для его создания легче воспользоваться WYSIWYG-редактором, в котором вы сможете создать набор блоков с абсолютным позиционированием и координатами границ, выраженными в пикселах или процентах.

#main {
      bottom: 10%;
      left: 5%;
      width: 40%;
    }
    #title {
      top: 50%;
      left: 50%;
      width: auto;
    }
    #title h1 {
      margin: 0;
    }
    #block2 {
      top: 2%;
      right: 2%;
      width: 25%;
    }
    div:hover {
      z-index: 1;
    }
  ...
  <div id="main">
    <p>
      <strong>Центральный блок</strong> имеет ширину 40% (от ширины страницы)
      и позиционирован абсолютно следующим образом: bottom: 10%; left: 5%;.
    </p>
    <p>
      "Неправильный" дизайн - с произвольным размещением элементов - используется
      обычно когда на странице совсем немного содержимого.
    </p>
  </div>

  <div id="title">
    <h1>
      Заголовок</h1>
  </div>

  <div id="block2">
    <strong>Блок 2 </strong>позиционирован при помощи свойств top: 2%; right:
    2%;
  </div>

Вопросы