Przy użyciu negatywnych marginesów tworzymy układy dwu- i trójkolumnowe.

Środkowa kolumna posiada płynną szerokość dostosowującą się do rozmiarów okna przeglądarki. Boczne kolumny mają stałą szerokość. Strona posiada również nagłówek oraz stopkę. Jeśli strona miałaby posiadać ściśle określoną szerokość, to przedstawiane w przykładach kolumny należy objąć dodatkowym wycentrowanym pudełkiem DIV.

Dwie kolumny

Szkielet html:

<div id="top">Nagłówek serwisu</div>
  <div id="background">
    <div id="middle">
      <div id="content">
        Lorem ipsum dolor sit amet enim. Etiam ullamcorper.
      </div>
    </div>
    <div id="right">
      Lorem ipsum dolor sit amet enim. Etiam ullamcorper.
    </div>
    <div class="clear"></div>
  </div>
<div id="footer">Stopka serwisu</div>

Kod zawiera nagłówek, kolumnę środkową i prawą oraz stopkę. Kod CSS jest bardzo prosty:

#top {
  height: 80px;
  background: #d4f393
}
#footer {
  background: #bdf884;
  height: 60px;
  clear: both
}
#right {
  float: right;
  width: 170px
}
#middle {
  float: left;
  width: 100%;
  margin-right: -170px
}
#content {
  margin-right: 170px
}
#background {
  background: #e7e2d5 url(right.png) right repeat-y;
}
.clear {
  clear: both
}

Prawa kolumna jest przesunięta na prawą stronę przy użyciu właściwości float. Kolumna środkowa jest przesunięta na lewą stronę, posiada negatywny margines o takiej samej wielkości, jak szerokość prawej kolumny, szerokość kolumny wynosi 100%. W środkowej kolumnie znajduje się pojemnik #content z ustalonym prawym marginesem.

Kolumny objęte są dodatkowym pojemnikiem #background z podwójnym tłem. Głównym tłem jest tło środkowej kolumny, a dodatkowe to obrazek imitujący rozciąganie prawej kolumny. Obrazek musi mieć taką szerokość jak lewa kolumna. Pod dwoma kolumnami znajduje się DIV z klasą clear. Odpowiada on za automatyczne rozciągnięcie pojemnika.

Trzy kolumny

Dla uproszczenia lewa kolumna posiada taką samą szerokość i identyczny kolor, jak kolumna prawa. Dzięki temu jeden pliki graficzn imitujący tło.

Szkielet html:

<div id="top">Nagłówek serwisu</div>
<div id="background">
  <div id="background2">
    <div id="middle">
      <div id="content">
        <div id="left">
          Contrary to popular belief belief.
        </div>
        <div id="center">
          Lorem Ipsum is simply dummy text.
        </div>
      </div>
    </div>
    <div id="right">
      Lorem ipsum dolor sit amet enim. Etiam ullamcorper.
    </div>
    <div class="clear"></div>
  </div>
</div>
<div id="footer">Stopka serwisu</div>

Lewa kolumna znajduje się wewnątrz DIV-a #content, a kolumna środkowa jest objęta DIV-em #center”. Wszystkie kolumny są objęte dwoma pojemnikami imitującymi tło: #background i #background2. Pierwszy tworzy tło dla kolumny środkowej i prawej. Drugi odpowiada za tło dla kolumny lewej.DIV #content imituje tło dla dwóch kolumn: #left i #center

Kod CSS wygląda następująco:

#top {
  height: 80px;
  background: #d4f393
}
#footer {
  background: #bdf884;
  height: 60px;
  clear:both
}
#left {
  width: 170px;
  float: left;
  background: #cfc4a9
}
#center {
  margin-left: 170px;
}
#right {
  float: right;
  width: 170px;
  background: #cfc4a9
}
#middle {
  float: left;
  width: 100%;
  margin-right: -170px;
}
#content {
  margin-right: 170px;
  background: #e7e2d5;
  background: url(right.png) left repeat-y;
}
#background {
  background: #e7e2d5 url(right.png) right repeat-y;
}
#background2 {
  background: url(right.png) left repeat-y;
}
.clear {
  clear: both
}

Tworzenie układów kolumnowych na bazie przesunięcia środkowej kolumny przy pomocy negatywnego marginesu jest prostym zadaniem. Wystarczy zrozumieć zasadę działania negatywnych marginesów oraz poznać kilka sztuczek z imitowaniem tła przy użyciu plików graficznych.