Mehrspalten-Layout mit flexiblen Außenspalten

Angeregt durch eine Forum-Frage, ob es möglich sei ein Layout mit dynamischen Außenspalten zu erzeugen um dort Hintergrundgrafiken einzubinden die sich immer an der mittleren zentrierten Spalte (Inhaltsbereich) ausreichten und bei einer Browser-Fensterverkleinerung nicht von der mittleren Spalte überdeckt werden, sondern sich jeweils nach links und rechts aus dem Browser-Fenster schieben. Weiterhin bestand der Wunsch, dass sich die rechte Grafik immer am Ende des Inhaltsbereiches platziert.

Hier » findet ihr eine Anleitung, wie sich dynamische Außenspalten mit fester Mitte erstellen lassen. Allerdings funktioniert die Methode nur mit Inhalten in den Außenspalten.

Um nur Hintergrundbilder in den Außenspalten einzubinden, muss das Layout etwas abgeändert werden. Wie das geht, werdet ihr hier erfahren.

Vorab das HTML-Markup

<body>
 <div id="kopf"><h1>Webseite</h1></div>

<div id="hgl"> </div> <!-- Linke dynamische Spalte -->


 <div id="hgr">  <!-- Recht Spalte umschließt den Inhaltsbereich damit die Grafik immer unten platziert werden kann -->
  <div id="inhalt">
       ......
   </div>
 </div>

</body>


Wird es eine Divsuppe ?

Um genau dies zu verhindern, müssen die Grafiken noch etwas angepasst werden.

Dazu muss man nur wissen, wie breit die Mitte sein soll. Im folgenden Beispiel ist die Mittelspalte 700 Pixel breit. Wenn bspw. die Hintergrundbilder jeweils eine Breite von 150 Pixel haben, so muss jedes Bild um den hälftigen Wert der Mittelspalte erweitert werden. Das bedeutet, dass das linke Bild nach rechts um 350 Pixel und das rechte Bild nach links um 350 Pixel erweitert wird. Also ergibt sich eine Gesamtbreite für jedes Bild von 500 Pixel. Da diese Erweiterungen nur als Abstandshalter dienen, können diese auch transparent bleiben.

Am Besten ihr schaut euch mal die Grafiken an.

Aber nun kommen wir zu den Style-Angaben.

1. Dynamische Außenspalten erstellen

Um dynamische Außenspalten zu erhalten, müssen nachfolgende CSS-Regeln auf zwei Div-Container angewandt werden.

/* linke Splate */

#hgl {
 width:50%;
 float:left;
 background:url(hgl.jpg)  no-repeat top right;
 height:500px;
 z-index:-1;
}


/* rechte Spalte */

#hgr {
 width:50%;
 float:left;
 background:url(hgr.jpg)  no-repeat bottom left ;
}

Da der linke Container für sich steht und es sich um ein leeres Element handelt, muss hier mit height:500px; die Grafikhöhe angegeben werden. Die Angabe z-index Benötigen die IE's bis Version 7. Damit wird verhindert, dass sich dieser Container über den Inhaltsbereich legt. Achtet bitte darauf, dass das linke Hintergrundbild rechts und das rechte Hintergrundbild links ausgerichtet werden muss.

2. Mittelspalte formatieren

Da der rechte Container #hgr den Inhaltsbereich umschließt, muss auch nur ein negativer linker Außenabstand mit margin-left:-350px; definiert werden.

#inhalt {
 margin-left:-350px;
 width:700px;
 background:#fff;
}  

Eigentlich sind wir fertig und hier das erste Beispiel»

Wer seine linke Grafik neben den Header haben möchte, der muss noch zwei weitere Regel aufstellen.

#hgl {
 position:relative;
 top:-100px; /* Entspricht der Höhe vom Header */
 width:50%; 
 float:left;
 background:url(hgl.jpg)  no-repeat top right;
 height:500px;
 z-index:-1;
}		 

Um Rundungsfehler im IE6 und möglicherweise auch im IE7 (letzteren nicht getestet) zu vermeiden, sollte mindestens eine Spalte in der Breite etwas verringert werden. Diese Regel könnt ihr dann mit Conditional Comments nur für den IE zugänglich machen.

<!--[if lt IE 8]>
#hgr {
 ...
 ...
 width:49.9%;
 ...
}
<![endif]-->

Und so sieht es aus »

Geht das nicht einfacher ?

Ja, wenn jemand die Hintergrundbilder auf einer Höhe haben möchte, der kann sich natürlich den ganzen Aufwand ersparen. Dafür reicht es aus bspw. den body oder #wrapper ein zentriertes Hintergrundbild zu übergeben. Wichtig ist nur das der transparente Teil der Grafik so breit sein muss wie der Inhaltsbereich der Webseite.

Beispiel-Grafik

HTML-Markup

<body>

 <div id="wrapper">
  <div id="kopf">
    <h1>Webseite</h1>
  </div>

  <div id="inhalt">
   ....
  </div>
 </div> 

<body>

Style-Angaben

#wrapper {
 background:url(bg.gif) no-repeat center top;
}

#kopf {
 width:700px;
 margin:0 auto;
 height:100px;
 background: #09c;
}
 
#inhalt {
 margin:0 auto;
 width:700px;
 background:#fff;
}  

Diese Angaben sollten wohl jedem vertraut sein. Die wichtigste Regel ist background:url(bg.gif) no-repeat center top;. Somit verhält sich die Hintergrundgrafik wie gewünscht.

Beispiel

Ich wünsche euch viel Spaß beim Nachbauen und Experimentieren.

erstellt am 20.09.2011

nach oben