Dreispalten-Layout mit fixer Mitte

Schrit 1

Um dynamische Außenspalten zu erhalten, müssen erst zwei Container mit einer Breite von 50% erstellt und jeweils links und recht gefloatet werden.

  #links , #rechts {
    width:50%;
  }

  #links {
    float:left;
  }

  #rechts {
    float:right;
  }

Schritt 2

Nun müssen die Innenbereiche der Außenspalten erstellt werden. In diesem Beispiel nehmen wir für die Mittelspalte eine Breite von 500 Pixel, sodass sich für die linke Spalte ein rechter und für die rechte Spalte ein linker Außenabstand von 250 Pixel ergibt.

  #links_innen {
    margin-right:250px;
  }

  #recht_innen {
    margin-left:250px;
  }  

Schritt 3

Jetzt kommen wir zur Mitte, die nach links gefloatet wird, und verpassen ihr einen negativen linken und rechten Außenabstand. Die relative Positionsangabe bewirkt, dass der letzte gefloatete Container nicht den Inhalt verdeckt.

  #mitte {
    position:relative;
    margin-left:-250px;
    margin-right:-250px;
    width:500px;
    float:left;
  }

Damit das Layout nicht zerstört wird, wenn das Browserfenster mal extrem verkleinert wird, muss dem Body Tag noch eine minimale Breite zugewiesen werden. Wer möchte, kann später noch eine maximale Breite definieren. Damit der Beispieltext nicht so am Rand klebt, bekommt das p Tag auch noch einen Innenabstand.

  body {
   min-width:760px;
  }  

  p {
   padding:20px;
  }

Schritt 4

Um auch den IE 6 und 7 zu berücksichtigen, müssen wir die Prozentangaben der Außenspalten etwas verringern, weil diese Browser Rundungsfehler aufweisen. Wer Grafiken verwendet, sollte dann auch noch beide Container nach links floaten.

Wer auf Nummer sicher gehen will, kann generell eine kleinere Prozentangabe wählen und erspart sich so die Sonderangaben für den IE.

  ++ Für IE 6 ++
 * html #links, * html #rechts {
   width:49.9%;
   float:left; 
 }

  ++ Für IE 7 ++
 *+ html #links, *+ html #rechts {
    width:49.9%;
    float:left; 
 }

Hier nochmal alle Angaben zusammengefasst inkl. HTML Struktur

<!DOCTYPE HTML>
<html>
 <head>
  <title>3 Spaltenlayout mit fixe mitte. </title>
  <style type="text/css">

  body {
   min-width:760px;
  }  

  p {
   padding:20px;
  }

  #links , #rechts {
    width:50%;
  }

  #links {
    float:left;
  }

  #rechts {
    float:right;
  }

  #links_innen {
    margin-right:250px;
  }

  #recht_innen {
    margin-left:250px;
  }  

  #mitte {
    position:relative;
    margin-left:-250px;
    margin-right:-250px;
    width:500px;
    float:left;
  }

  /* Für IE 6 */
 * html #links, * html #rechts {
   width:49.9%;
   float:left; 
 }

  /* Für IE 7 */
 *+ html #links, *+ html #rechts {
    width:49.9%;
    float:left; 
 }

</style>

</head>
<body>

 <div id="links">
  <div id="links_innen">

  </div>
</div>

<div id="mitte">

</div>
 
 <div id="rechts">
  <div id="rechts_innen">
  </div>
</div>
 
</body>
</html>

Hier nun das Ergebnis.

Noch ein Beispiel mit absoluter Positionierung.

Wer nur Grafiken einbinden möchte und zudem noch versetzt, sollte sich diese Anleitung durchlesen. Weiter»

erstellt am 08.02.2011 aktualisiert am 20.09.2011

nach oben