24.03.2008

Dreispaltiges Layout mit festen Breiten und zentrierter Seite

In dieser Anleitung wurde ein "flexibles Layout" beschrieben, das sich unterschiedlichen Fenstergrößen anpasst. Diese Variante kann jedoch auch Nachteile haben, weil damit bei zu kleinen oder zu breiten Fenstergrößen bestimmte Layout-Effekte möglicherweise zerstört werden.
Nachfolgend geht es deshalb um eine horizontal zentrierte Seite mit einem dreispaltigen Layout, wobei die Spalten fest definierte Breiten(pixel)werte haben. Das vorweggenommene Ergebnis sieht etwa so aus: Beispiel ansehen

Zunächst ist die Gesamtbreite der Seite festzulegen. Die meisten Bildschirme werden heute eine Auflösung von kaum mehr unter 1000px haben. Die Beispielseite soll deshalb 900px breit sein, so dass ggf. auch für die Favoritenleiste noch etwas Platz bleibt. Selbstverständlich können auch andere Werte verwendet werden.
Zum horizontalen Zentrieren verwenden wir einen "wrapper", der später den gesamten restlichen Inhalt aufnimmt:

#wrapper
{
width: 900px;
margin: 20px auto;
border: 1px solid black;
}

margin: 20px auto; bedeutet, dass der wrapper einen oberen und unteren Abstand von 20px zum Bildschirmrand hat. Das "auto" bewirkt die horizontale Zentrierung, so dass die linken und rechten Seitenabstände zum Bildschirmrand gleich groß sind.

Setzen wir in unseren #wrapper zunächst einen #header, der z.B. eine Grafik oder einen Homepagetitel beinhaltet. Seine Formatierung hängt vom Einzelfall ab. Im Beispiel soll er so breit wie die Gesamtseite sein und ist zur optischen Verdeutlichung (wie auch die anderen Elemente) etwas farblich gestaltet. Sein Abstand zu den nachfolgenden "Spalten" soll 15px betragen:

#header
{
width: 900px;
background: #D6B88D;
margin-bottom: 15px;
}

Für die drei Spalten ist nun etwas Rechenarbeit angesagt: Die linke Spalte soll 200px, die rechte 180px breit sein.
Damit der Text nicht zu sehr am Rand klebt, verwenden wir einen Padding-Abstand von je 5px. Der #content soll einen Außenabstand von 10px zu den benachbarten Spalten haben.

Beginnen wir mit der #linksbox. Wir ordnen sie durch ein float: left; links an und berücksichtigen 5px Innenabstand.

#linksbox
{
width: 200px;
float: left;
padding: 5px;
background: #C5D78D;
}

Analog wird die #rechtsbox mit einem float: right angeordnet:

#rechtsbox
{
width: 180px;
float: right;
padding: 5px;
background: #A1B074;
}

Die Breite des #content berechnet sich nach dem Boxmodell wie folgt:
900px Gesamtbreite
abzüglich:
200px Breite #linksbox + 2 x (5px Padding #linksbox) = 210px
180px Breite #rechtsbox + 2 x (5px Padding #rechtssbox) = 190px
2 x 10px Abstand zur #linksbox und #rechtsbox = 20px
2 x 5px Padding #content = 10px

Das ergibt eine #content-Breite von
900px - 210px - 190px - 20px - 10px = 470px

Beim #content müssen wir zumindest auf einer Seite einen Abstand zur benachbarten Box definieren. Andernfalls würde sich sein Inhalt unter bzw. hinter der entsprechenden Nachbarbox anordnen. Folglich erhält er ein margin-left: 220px;
Das entspricht der Summe der Breite der #linksbox (200px), 2 x 5px Padding der #linksbox (10px) sowie einem Außenabstand zu #linksbox von 10px.
Der Abstand zur #rechtsbox von 10px ergibt sich automatisch, weil er bereits bei der Bemessung der Breite des #content einkalkuliert wurde.
Damit können wir für den #content folgende Angaben definieren:

#content
{
width: 470px;
padding: 5px;
margin-left: 220px;
background: #D6D6D6;
}

Damit sich der #content zwischen die gefloateten Außenboxen schiebt, ist im HTML-Teil darauf zu achten, dass er erst nach diesen in der Reihenfolge kommt. Außerdem clearen wir noch vor dem Schließen des #wrapper. Die vorgenannten Style-Angaben schreiben wir in eine "style.css"-Datei und verweisen darauf innerhalb des head-Bereichs:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Dreispaltiges Layout, zentriert mit festen Breiten</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<div id="wrapper">

<div id="header">
<h1>Dreispaltiges Layout, zentriert mit festen Breiten</h1> </div>
<!--Ende #header-->

<div id="linksbox">Linksbox</div>

<div id="rechtsbox">Rechtsbox</div>

<div id="content">Content</div>

<div style="clear: both;"></div>

</div><!--Ende #wrapper-->

</body>
</html>

Beispiel ansehen

Wer noch die drei Spalten, die je nach Inhalt unterschiedlich lang sind, auf gleiche Länge bringen will, kann nach dieser Anleitung vorgehen.

nach oben