Мы уже пробовали создавать макет страницы из одной, двух и трех колонок. Как говорил один персонаж из комедии «Берегись автомобиля»: «А не замахнуться ли нам на Вильяма, понимаете ли нашего, Шекспира?» Давайте попробуем создать «резиновый» несимметричный макет страницы, а потом преобразовать его в несимметричный макет с фиксированным расположением элементов.
Как всегда начнем с разметки нашей будущей страницы.

<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).