Для примера придумаем несложный HTML-код. Пусть это будет элемент DIV, внутри которого есть картинка и текст. Ну например вот такой:

<div id="example">
 <img src="http://myserver.ru/img/im1.png" alt="Это картинка" />
  А это просто текст слов...
</div>

Я не буду задавать какие-либо стили для элементов, находящихся внутри блока #example, ведь это только пример, а вот CSS-правило для этого блока разберем подробно.

#example {
  position:absolute;
  top:50%;
  left:50%;
  width:250px;
  height:200px;
  margin-left:-125px;
  margin-top:-100px;
  border:1px dotted red;
}

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

Задавая элементу #example абсолютное позиционирование, мы извлекаем его из нормального потока и имеем возможность поместить в любом месте страницы. Что мы и делаем, помещая верхний левый угол элемента в центр окна браузера, задавая свойствам top и left значения 50%.

Зная ширину (250px) и высоту (200px) элемента #example мы задаем свойствам margin-left и margin-top отрицательные значения, равные половине ширины и, соответственно высоты центрируемого элемента, заставляя его таким образом сдвинуться влево и вверх и занять место в центре окна браузера.

Свойство border добавлено лишь для наглядности.

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

Но все-таки для большинства задач это решение вполне подойдет.

<div id="header">
... какой-то заголовок или слоган ...
</div>
<div id="sidebar">
... здесь может быть меню сайта ...
</div>
<div id="content">
... здесь основное содержимое ...
</div>
<div id="info">
... дополнительная  информация ...
</div>

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

body {
  margin:5px 0 0 5px;
  background-color:#000;
  background-image:url(flowers.jpg);
  background-position: top right;
  background-repeat:no-repeat;
  color:#fff;
}
#header {
  position:absolute;
  right:5%;
  top:10%;
  width:40%;
  font-weight:bold;
  font-size:1.4em;
}

#sidebar {
  position:absolute;
  left:35%;
  top:1%;
  width:65%;
  background-color:#333;
}
#content {
  position:absolute;
  left:5%;
  top:20%;
  width:45%;
}
#info {
  position:absolute;
  left:80%;
  width:20%;
  top:80%;
  background-color:#333;
}

Для размещения фонового изображения задаем значения в процентах, что позволит ему перемещаться вместе с содержимым страницы при изменении размеров окна браузера.
Далее мы используем свойство position, которому задаем значение absolute и определяем позицию элемента, задавая его положение (свойства top, left, right, bottom) опять же в процентах.
Еще легче создать несимметричный макет с фиксированным расположением элементов на странице. Используйте вместо относительных величин (проценты), абсолютные (например px).

<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; и на этом верстка собственно каркаса закончена. Да, разный бэкграунд для элементов я задаю исключительно для наглядности примера.

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

и отформатируем ее с помощью следующей таблицы стилей:

#content {
  float:left;
  width:50%;
  background-color:#CCC;
}
#sidebar {
  float:left;
  width:30%;
  background-color:#FFC;
}
#otherbar {
  float:left;
  width:20%;
  background-color:#FFC;
}
#header {
  background-color:#FCF;
  text-align:center;
}
#footer {
  clear:both;
  text-align:center;
  background-color:#CFF;
}

В этом решении все три колонки включены в плавающую модель, выравниваются по левому краю и суммарная их ширина не превышает 100%.

Однако следует очень внимательно относиться к полям, рамкам и отступам этих элементов, поскольку, если суммарная ширина колонок превысит 100%, то одна или две колонки будут расположены друг под другом.

Вот так легко и просто. Этот метод работает во всех популярных браузерах.

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

А теперь css код, который сформирует нужное нам визуальное представление:

#content {
float:left;
width:67%;
background-color:#CCC;
}
#sidebar {
background-color:#FFC;
}
#header {
background-color:#FCF;
text-align:center;
}
#footer {
clear:both;
text-align:center;
background-color:#CFF;
}

Мы используем свойство float для того, чтобы задать положение блока content на странице и задаем ширину этого блока равной двум третям окна браузера. В соответствии с правилами CSS, последующее содержимое включенное в «плавающую модель», а в нашем случае это блок sidebar, будет «обтекать» блок content со стороны, противоположной направлению выравнивания, т.е. справа.
Свойство float работает примерно как атрибут align, который применяется в HTML, но дает больше возможностей управления отображением элементов за счет использования полей, рамок и отступов.
Разный цвет фона блоков задан лишь для того, чтобы Вам легче было наблюдать границы блоков, если Вы вдруг захотите испытать этот пример.
И наконец в блоке footer используется свойство clear для того, чтобы обеспечить его отображение гарантировано ниже любого элемента из «плавающей модели».

Правда такой вариант имеет недостаток. При наличии в блоке sidebar содержимого большего объема, чем в блоке content, «лишнее» содержимое перестает обтекать блок content и занимает всю ширину окна браузера.

Устранить недоразумение возможно, если подкорректировать значения левого отступа или левого поля элемента sidebar. Так мы и поступим, записав margin-left:67%; Посмотрите приведенный ниже окончательный css код.

#content {
float:left;
width:67%;
background-color:#CCC;
}
#sidebar {
margin-left:67%;
background-color:#FFC;
}
#header {
background-color:#FCF;
text-align:center;
}
#footer {
clear:both;
text-align:center;
background-color:#CFF;
}

Буду рад, если этот рецепт кому-нибудь пригодится.

body {
  margin-left:20%;
  margin-right:20%;
}

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

body {
  width:600px;
}

При этом колонка будет выровнена по левому краю окна браузера. И если нам необходимо вновь отцентрировать ее, то без дополнительного блока не обойтись.

<div id="content">
... содержимое блока ...
</div>

и далее вот такой css код:

body {
  width:600px;
  padding-left:50%;
}
#content {
  width:600px;
  margin-left:-300px;
}

Разберем подробнее, что же мы натворили?

Чтобы понять суть этого приема, надо хорошо понимать основы модели визуального форматирования. В частности точно представлять, из каких именно величин складывается общая ширина (высота) блока. При этом еще необходимо учитывать различия в реализации блочной модели конкретных браузеров. Особенно того, названИЕкоторого Вы и так знаете.

В элементе body, который имеет ширину 600px мы задали левый отступ в 50%, добавив таким образом к ширине элемента половину ширины окна браузера. При этом левый край блока content расположился бы точно по центру окна, но мы предусмотрительно сдвигаем его ровно на половину ширины, на 300px влево, задавая отрицательное значение левого поля.
Теперь блок content расположен точно в центре экрана и ширина его фиксирована. Этот прием работает во всех популярных браузерах.
Все можно было бы написать еще проще:

#content {
  width:600px;
  margin-left:auto;
  margin-right:auto;
}

К моему (да и не только к моему) великому сожалению, этот способ хорош для всех браузеров, кроме того, названИЕкоторого Вы знаете. А он у нас пока самый популярный…