Vertikale Linie mit CSS als Gestaltungselement für ein Zweispalten-Layout

Eine beliebte Gestaltungsmöglichkeit seine Webseite optisch zu strukturieren sind vertikale Linien. Aber was ist, wenn im Vorfeld die Längen der einzelnen Spalten nicht bekannt sind? Bekanntlich lassen sich ja mit CSS keine gleich langen Spalten, wie es bei Tabellen der Fall ist, erstellen.

In dieser kleinen Anleitung wird beschreiben wie einfach und simpel es ist, ein Zweispalten - Layout mit einer vertikalen Linie zu strukturieren, ohne dabei auf den optischen Effekt der gleich langen Spalten verzichten zu müssen.

1. HTML-Markup

Als Grundlage dient hier ein einfaches Zweispalten – Layout mit einer festen Breite von 950 Pixel, wobei die linke Spalte eine Gesamtbreite von 300 Pixel und die rechte Spalte eine Gesamtbreite von 650 Pixel haben soll.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
    "http://www.w3.org/TR/html4/loose.dtd"><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Vertikale Trannlinie</title>
</head>

<body id="home">
 <div id="seite">
  <div id="kopf">...</div>
   <div id="links">...</div>
    <div id="rechts">...</div>
     <div id="footer">...</div>
 </div>
</body>
</html>

2. Die relevanten Style-Angaben

#links {
  width:299px;
  float:left;
  border-right:1px solid #aaa;
  margin:10px 0;
}

#rechts {
  width:649px;
  float:left;
  border-left:1px solid #aaa;
  margin:10px 0; 
  margin-left:-1px;
}

Um den Effekt der gleich langen Spalten zu erreichen, bekommt die linke Spalte die Eigenschaft border-right: und die rechte Spalte die Eigenschaft border-left: zugewiesen. Mit margin-left:-1; wird die rechte Spalte um ein Pixel nach links verschoben. Somit liegen beide Rahmen genau übereinander.

So, das war's auch schon und hier» folgt ein Beispiel.

Erstellt am 24.08.2011

Wer ältere Browser nicht unterstützen mag, der kann bessere Effekte mit den Pseudoelementen :before und :after erziehlen.»

Aktualisiert am 07.02.2012

nach oben