Попробуем создать макет с тремя колонками, которые не будут изменять свою ширину при изменении ширины окна браузера. Эта задачка даже немного посложнее создания «резинового» макета с тремя колонками, хотя на первый взгляд должно быть наоборот.
Как всегда начнем с HTML-разметки страницы. Изначально можно взять точно такую же разметку, которую мы использовалим для верстки трехколоночной «резиновой» модели. Но здесь нам придется дополнить разметку дополнительными элементами. Вот готовый HTML-код:

<div id="viewPage">
  <div id="header">
  ... шапка страницы ...
  </div>
  <div id="frame">
    <div id="sidebar">
    ... колонка меню ...
    </div>
    <div id="content">
    ... основное содержимое страницы ...
    </div>
  </div>
  <div id="otherbar">
  ... колонка другого меню ...
  </div>
  <div id="footer">
  ... подвал ...
  </div>
</div>

Обратите внимание, что порядок следования элементов sidebar и content можно запросто изменить, если это необходимо с точки зрения SEO.

Легко можно заметить отличия от «резинового» макета. Во-первых мы заключили весь набор элементов в элемент div с идентификатором viewPage (не экономьте, не стоит использовать тут BODY, мало ли зачем он потом может пригодиться), а во-вторых заключили левую колонку и колонку с основным содержимым в еще один div с id=»frame».

Подготовительный этап закончен, теперь с помощью CSS попробуем расположить все элементы так, как мы задумывали.

#viewPage {
  width:870px;
  margin-left:30px;
}
#header {
  text-align:center;
  background-color:#FCF;
}
#sidebar {
  float:left;
  width:200px;
  background-color:#FFC;
}
#content {
  float:right;
  width:470px;
  background-color:#CCC;
}
#frame {
  float:left;
  width:700px;
}
#otherbar {
  float:right;
  width:140px;
  background-color:#FFC;
}
#footer {
  clear:both;
  paddin-top:1em;
  text-align:center;
  background-color:#CFF;
}

Для начала задаем общую ширину страницы равную 870px, используя для этого элемент с id=»viewPage» + отступ от левого края окна браузера в 30px. В элементе header комментировать в общем нечего. Далее задаем фиксированную ширину для элементов sidebar в 200px и content в 470px и выравниваем их в потоке плавающей модели соответственно по левому и правому краю. Обратите внимание, что общая их ширина 200 + 470 = 670px меньше ширины их родительского элемента frame. Как говорится, на всякий случай…

Далее включаем в поток плавающей модели элементы frame (вот для чего он и нужен был!) и otherbar, выравнивая frame по левому, а otherbar по правому краю. Ситуация с суммой горизонтальных размеров блоков здесь такая же – есть запас в 30px (это не догма – можете и не оставлять запас, если уверены).

Hаконец элемент footer мы исключаем из плавающей модели с помощью clear:both; и на этом верстка собственно каркаса закончена. Да, разный бэкграунд для элементов я задаю исключительно для наглядности примера.