Отрицательные поля, пожалуй, самый мощный инструмент для семантической верстки сложных макетов. Овладеть этой техникой просто необходимо, потому как благодаря ей вы во многих случаях сможете отказаться от таблиц для разметки макета. Разберем использование отрицательных полей на примере – сверстаем трехколоночный макет с двумя фиксированными боковыми колонками, тянущейся центральной, шапкой и подвалом.

XHTML———————————

<div id=»header»>Шапка</div>

<div id=»container»>
<div id=»nav»>Левая колонка</div>
<div id=»content»>Контент</div>
</div>

<div id=»sidebar»>Правая колонка</div>
<div id=»footer»>Футер</div>
Обратите внимание на то, что левая и центральная колонки объединены общим контейнером. Именно для этого контейнера мы установим отрицательное поле, которое «подтянет» правую колонку.

CSS———————————

body {
padding:20px;
}
#header {
padding:10px;
}
#container {
float:left; /* Делаем контейнер плавающим, чтобы добиться нужного поведения */
width:100%; /* Указываем контейнеру занимать все доступное пространство */
margin:10px -170px 10px 0; /* Устанавливаем отрицательное правое поле, чтобы подтянуть правую колонку */
}
#nav {
float:left; /* Прижимаем блок налево */
width:150px; /* Обращаем внимание, что фактическая ширина блока = 170 пикселям */
padding:10px;
}
#content {
margin:0 150px 0 170px; /* Устанавливаем поля, чтобы контент не «налезал» на боковые колонки */
padding:10px;
}
#sidebar {
float:right; /* Прижимаем блок направо */
width:130px; /* Обращаем внимание, что фактическая ширина блока = 150 пикселям */
margin-top:10px;
padding:10px;
}
#footer {
clear:both; /* Ставим подвал ниже самой длинной колонки */
padding:10px;
}
ie.css:

* HTML #nav {
width:170px;
w\idth:150px;
}
* HTML #sidebar {
width:150px;
w\idth:130px;
}
#footer {
height:1%; /* Немного магии для IE5, неправильно считающего отступы */
}

Это даст нам следующий результат:

2. Резиновый дизайн.

-Два дива, первый зафлоачен налево, второй встает справа, фон второго подлезает под первый. Если у первого задать width:100%; то второй слетает вниз, как будто никакого обтекания и не было, ширина блока также на все окно.

Как сделать так чтобы два дива были на одном уровне но при этом тянулись в разные стороны:

-Два дива – один налево другой направо зафлоачен. Первому задали ширину  width: 100%; – второй блок слетает вниз но остается в правом углу (т.к. он зафлоачен направо, естественно ширина остается по контенту). Если при этом у второго дива задана ширина – к примеру 200px, то если у первого зададим margin-right:-200px; то второй встает в тот же ряд где и первый – только справа и тянется на 100%.

div.sas {

background:#00CC00; /*зеленый*/

float:left;

width:100%;

margin-right:-200px;

}

div.dad {

background:#0099CC; /*синий*/

float:right;

width:200px;

}

<div class=»sas»>sasasasasasasasasasasasasasa</div>

<div class=»dad»>dada</div>

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