Jak stworzyć układ kolumnowy przy użyciu negatywnych marginesów?

Jako pierwszy technikę tą opisał najprawdopodobniej Ryann Brill na łamach cenionego serwisu A List Apart (http://www.alistapart.com/arti...). Przy użyciu negatywnych marginesów stworzymy układy dwu- i trójkolumnowe.

Środkowa kolumna będzie posiadać płynną szerokość dostosowującą się do rozmiarów okna przeglądarki. Natomiast Bocznym kolumnom nadamy stałą szerokość. Strona będzie także posiadać nagłówek oraz stopkę. Przedstawione przykłady możesz dowolnie wykorzystywać w tworzonych projektach. Jeśli dodatkowo chciałbyś, aby strona posiadała ściśle zdefiniowaną szerokość, to przedstawiane w przykładach kolumny powinieneś objąć dodatkowym wycentrowanym pudełkiem DIV.

Tworzymy dwie kolumny

Tworzenie układu dwukolumnowego rozpoczynamy od najprostszego szkieletu HTML:

 1. <div id="top">Nagłówek serwisu</div>
 2.  
 3. <div id="middle">
 4.         Lorem Ipsum...
 5. </div>
 6.  
 7. <div id="right">
 8.         Lorem Ipsum...
 9. </div>
10.  
11. <div id="footer">Stopka serwisu</div>

Listing zwinięty - 11 linii

Kod zawiera nagłówek, kolumnę środkową, prawą oraz stopkę. Kod CSS dla tych dwóch ostatnich pojemników jest bardzo prosty:

 1. #top {
 2.         height: 80px;
 3.         background: #d4f393
 4. }
 5.  
 6. #footer {
 7.         background: #bdf884;
 8.         height: 60px;
 9.         clear: both
10. }

Listing zwinięty - 10 linii

Prawa kolumna jest standardowo przesuwana na prawą stronę przy użyciu właściwości float. Nadajemy jej także szerokość 170 pikseli:

1. #right {
2.         float: right;
3.         width: 170px
4. }

Listing zwinięty - 4 linii

Natomiast kod dla kolumny środkowej przedstawia się następująco:

1. #middle {
2.         float: left;
3.         width: 100%;
4.         margin-right: -170px
5. }

Listing zwinięty - 5 linii

Wymaga on krótkiego omówienia. Po pierwsze, kolumna jest przesunięta na lewą stronę. To zrozumiałe. Po drugie, posiada negatywny margines o takiej samej wielkości, jak szerokość prawej kolumny. Nie działał on by jednak prawidłowo, gdyby szerokość kolumny nie została ustalona na 100%.

Powyższy kod powinien w teorii działać bardzo dobrze. Jednak kolumny zachodzą na siebie:

Rozwiązanie to umieszczenie w środkowej kolumnie kolejnego pojemnika:

1. <div id="middle">
2.         <div id="content">
3.                 Lorem Ipsum...
4.         </div>
5. </div>

Listing zwinięty - 5 linii

Któremu należy nadać odpowiedni margines:

1. #content {
2.         margin-right: 170px
3. }

Listing zwinięty - 3 linii

Teraz dwie kolumny działają w odpowiedni sposób:

Z efektem możesz się zapoznać w pliku przyklad1.html.

Dodajemy płynne tło

Powyższy układ kolumnowy ma jedną istotną wadę. Kolumny nie rozciągają się w pionie. Rozwiązaniem tego problemu jest objęcie kolumn dodatkowym pojemnikiem i nadanie mu podwójnego tła. Głównym tłem będzie tło środkowej kolumny, a dodatkowym będzie obrazek imitujący rozciąganie prawej kolumny. Obrazek musi mieć więc szerokość dokładnie 170 pikseli:

Spójrz na uzupełniony kod HTML:

 1. <div id="background">
 2.         <div id="middle">
 3.                 <div id="content">
 4.                         Lorem Ipsum
 5.                 </div>
 6.         </div>
 7.  
 8.         <div id="right">
 9.                 Lorem Ipsum
10.         </div>
11.  
12.         <div class="clear"></div>
13. </div>

Listing zwinięty - 13 linii

Kod CSS dla nowego pojemnika to tylko nadanie tła z powtarzalnością w pionie:

1. #background {
2.          background: #e7e2d5 url(right.png) right repeat-y;
3. }

Listing zwinięty - 3 linii

Pod dwoma kolumnami pojawił się także DIV z klasą clear. Odpowiada on za automatyczne rozciągnięcie nowej pojemnika dzięki poniższemu kodowi:

1. .clear {
2.         clear: both
3. }

Listing zwinięty - 3 linii

Spójrzmy jeszcze na całość kodu CSS:

 1. #top {
 2.         height: 80px;
 3.         background: #d4f393
 4. }
 5.  
 6. #footer {
 7.         background: #bdf884;
 8.         height: 60px;
 9.         clear:both
10. }
11.  
12. #right {
13.         float: right;
14.         width: 170px;
15.         background: #cfc4a9
16. }
17.  
18. #middle {
19.         float: left;
20.         width: 100%;
21.         margin-right: -170px;
22. }
23.  
24. #content {
25.         margin-right: 170px;
26.         background: #e7e2d5
27. }
28.  
29. #background {
30.          background: #e7e2d5 url(right.png) right repeat-y
31. }
32.  
33. .clear {
34.         clear: both
35. }

Listing zwinięty - 35 linii

Z gotowym przykładem możesz się zapoznać tradycyjnie w pliku przyklad2.html.

Czas na trzy kolumny

Stworzenie układu z trzema kolumnami jest na ogół dużym wyzwaniem. Jednak w przypadku naszego układu dwukolumnowego dodanie lewej kolumny wymaga jedynie kilku prostych modyfikacji. Dla uproszczenia przykładu załóżmy, że lewa kolumna będzie posiadać taką samą szerokość i identyczny kolor, jak kolumna prawa. Dzięki temu możemy posłużyć już przygotowanym plikiem graficznym imitującym tło.

Finalny kod HTML prezentuje się następująco:

 1. <div id="background">
 2.         <div id="background2">
 3.                 <div id="middle">
 4.                         <div id="content">
 5.  
 6.                                 <div id="left">
 7.                                         Lorem Ipsum
 8.                                 </div>
 9.  
10.                                 <div id="center">
11.                                         Lorem Ipsum
12.                                 </div>
13.  
14.                         </div>
15.                 </div>
16.  
17.                 <div id="right">
18.                         Lorem Ipsum
19.                 </div>
20.  
21.                 <div class="clear"></div>
22.         </div>
23. </div>

Listing zwinięty - 23 linii

Jak łatwo zauważyć, dokonaliśmy w nim dwóch ważnych modyfikacji. Po pierwsze, lewa kolumna znajduje się wewnątrz DIV-a #content, a kolumnę środkową objęliśmy DIV-em #center. Kod CSS dla tych dwóch elementów wygląda następująco:

1. #left {
2.         width: 170px;
3.         float: left;
4.         background: #cfc4a9
5. }
6.  
7. #center {
8.         margin-left: 170px
9. }

Listing zwinięty - 9 linii

Dodatkowo wszystkie kolumny są teraz objęte dwoma pojemnikami imitującymi tło: #background i #background2. Pierwszy tworzy tło dla kolumny środkowej i prawej:

1. #background {
2.          background: #e7e2d5 url(right.png) right repeat-y
3. }

Listing zwinięty - 3 linii

Drugi pojemnik odpowiada za tło jedynie dla kolumny lewej:

1. #background2 {
2.          background: url(right.png) left repeat-y
3. }

Listing zwinięty - 3 linii

To już niemal koniec. Ostatnim krokiem jest dodanie imitacji tła dla DIV-a #content, który obejmuje dwie kolumny:

1. #content {
2.         margin-right: 170px;
3.         background: #e7e2d5;
4.         background: url(right.png) left repeat-y
5. }

Listing zwinięty - 5 linii

Na końcu spójrzmy na całość kodu CSS:

 1. #top {
 2.         height: 80px;
 3.         background: #d4f393
 4.  
 5. }
 6.  
 7. #footer {
 8.         background: #bdf884;
 9.         height: 60px;
10.         clear:both
11. }
12.  
13. #left {
14.         width: 170px;
15.         float: left;
16.         background: #cfc4a9
17. }
18.  
19. #center {
20.         margin-left: 170px
21. }
22.  
23. #right {
24.         float: right;
25.         width: 170px;
26.         background: #cfc4a9
27. }
28.  
29. #middle {
30.         float: left;
31.         width: 100%;
32.         margin-right: -170px
33. }
34.  
35. #content {
36.         margin-right: 170px;
37.         background: #e7e2d5;
38.         background: url(right.png) left repeat-y
39. }
40.  
41. #background {
42.         background: #e7e2d5 url(right.png) right repeat-y
43. }
44.  
45. #background2 {
46.          background: url(right.png) left repeat-y
47. }
48.  
49. .clear {
50.         clear: both
51. }

Listing zwinięty - 51 linii

Nic nie stoi na przeszkodzie, aby lewa kolumna posiadała inne tło lub szerokość. Wtedy należy użyć innego pliku graficznego, jako tła dla pojemników #background2 oraz #content. Finalny rezultat naszych działań przedstawia ilustracja:

Kod gotowy do wykorzystania znajduje się w pliku przyklad3.html

Podsumowanie

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

Przedstawione przykłady można pobrać tutaj: