Flüssiges Layout mit gleich langen Spalten

Hier» habt ihr erfahren, wie sich die Faux Columns Methode auf Layouts mit fester Breite anwenden lässt. Aber was ist, wenn sich das Layout am Browserfenster anpassen soll? Auch dafür ist diese Methode geeignet. Dazu muss lediglich eine Hintergrundgrafik angefertigt werden, die so breit ist wie das Browserfenster.

1. Beispiel flexibles Zweispalten-Layout

Das folgende, mit prozentualen Breitenangaben erstellte Zweispalten-Layout füllt das gesamte Browserfenster aus, wobei sich die linke Spalte über 20 Prozent der Gesamtbreite erstreckt. Den Rest von 80 Prozent bekommt die rechte Spalte.

HTML-Dokument


<body id="home">
 <div id="wrapper">
  <div id="kopf">...</div>
   <div id="links">...</div>
    <div id="rechts">...</div>
     <div id="fuss">...</div>
 </div>
</body>

Style-Angaben

* {
  margin:0;
  padding:0;
  list-style:none;
  border:none;
}

body {
  background:#fff;
  float:left;
  width:100%;
}

#wrapper {
  background-color:#fff;
  min-width:760px;
} 
 
#kopf {
  background:#58c38b;
  height:200px;
}
 
#links {
  width:20%;
  float:left;
  background:#b4e3b4;
}

#rechts {
  width:79.9%;
  float:right;
  background:#e3f9e4;
}

#fuss {
  background:#58c38b;
  height:100px;
  clear:both;
}

h1 , h2 , h3 , p  {
 padding:20px;
}


So sieht’s bisher aus

Grafik erstellen

Die Hintergrundgrafik sollte eine Breite von ca. 2000 Pixel haben und ist somit größer als üblicherweise Browserfenster sind. Wer für sein Layout eine maximale Breite notiert, der kann seine Grafik dementsprechend anpassen. Die Grafik ist auch hier wieder mit 5 Pixel nur minimal hoch. Die Aufteilung der Hintergrundfarben entspricht den Prozentwerten des Layouts. D.h. 20 Prozent von 2000 Pixel sind 400 Pixel für die linke und 1600 Pixel für die rechte Spalte.

Hier könnt ihr euch die Grafik ansehen oder kopieren»

Hintergrundgrafik einbinden

#wrapper {
  background-image:url(bg_wrapper.gif");
  background-repeat:repeat-y;
  background-position:20% 0;
  background-color:#fff;
  min-width:760px;
} 

Mit background-images: wird die Hintergrundgrafik dem div#wrapper-Element zugewiesen. Für die vertikale Wiederholung wird noch die Style-Angabe background-repeat: repeat-y; benötigt. Der wesentliche Unterschied zum Layout mit fester Breite ist der, dass hier die horizontale Positionsangabe in Prozent angegeben wird. So wird mit background-position:20% 0; sichergestellt, dass die Hintergrundgrafik um diesen Wert nach links verschoben wird.

Hier wieder die Kurzschreibweise.

background:url(bg_wrapper.gif") repeat-y 20% 0 #fff;

Das war's und hier ist nun das Endergebnis»

2. Beispiel flexibles Dreispalten-Layout

Natürlich geht das Ganze auch mit einem Dreispalten-Layout. Dazu wird allerdings ein weiterer Container benötigt. Damit es nicht langweilig wird, werde ich hier nur die Änderungen behandeln.

HTML-Dokument


<body id="home">
 <div id="wrapper">
  <div id="wrapper_innen">
   <div id="kopf">...</div>
    <div id="links">...</div>
     <div id="rechts">...</div>
      <div id="mitte">...</div>
	   <div id="fuss">...</div>
  </div> 
 </div>
</body>

Die erweiterten Style-Angaben


#wrapper {
 background:url(bg_links.gif) repeat-y 20% 0 #fff;
  margin:0 auto;
  min-width:760px;
} 
#wrapper_innen {
 background:url(bg_rechts.gif) repeat-y 80% 0;
}

#links {
 width:20%;
 float:left;
}

#rechts {
 width:20%;
 float:right;
}

#mitte {
 float:left;
 width:60%;
} 

Hier muss darauf geachtet werden, dass die Grafik diesmal um 80 Prozent nach links verschoben wird. Somit ist die Hintergrundfarbe der Grafik immer unter der rechten Spalte positioniert.

Zweite Grafik erstellen

Für die rechte Spalte benötigen wir wieder eine 2000 Pixel breite Grafik. Nur diesmal ist die Aufteilung eine andere. Der Bereich von 0 bis 1600 Pixel wird Transparent und die restlichen 400 Pixel bekommen eine Hintergrundfarbe. Die Transparenz muss sein, damit diese Grafik nicht die erste Grafik verdeckt.

Beispiel»

Erstellt am 27.08.2011

Für moderne Browser geht das auch ohne Grafik»

Aktualisiert am 07.02.2012

nach oben