01.01.2008

Dreispaltiges Layout mit "flexiblen Breiten"

Beim dreispaltigen Layout mit flexibler Breite verwenden wir statt fester Pixelwerte prozentuale Angaben. Damit passen sich alle drei Boxen der jeweiligen Bildschirmauflösung an. Wir achten darauf, dass die Gesamtbreite nicht mehr als 100% beträgt.

Unsere #linksbox soll 18% breit sein, einen linken und rechten Außenabstand von 1% sowie 0.5% Innenabstand haben. Wir verwenden eine Hintergrundfarbe, lassen links floaten und verwenden wegen eines IE6-Bugs ein display: inline;.

Auch für den #content verwenden wir ein float: left; und ein display: inline;. Seine Breite soll 60% betragen, Padding-Wert wie bei der #linksbox.

Für die #rechtsbox verwenden wir zunächst die gleichen Werte wie für die #linksbox. Lediglich ihre Breitenangabe müssen wir neu berechnen, diesmal als Differenz zwischen 100% Gesamtbreite und den für #linksbox und #content bereits vergebenen Werte. Damit verbleibt für die #rechtsbox folgender Breitenwert:
100% - (2 x 1% Außenabstand #linksbox) - (2 x 0.5 % Innenabstand #linksbox) - 18% Breite #linksbox - (2 x 0.5% Innenabstand #content) - 60% Breite #content - (2 x 1% Außenabstand #rechtsbox) - (2 x 0.5% Innenabstand #rechtsbox) = 15%.
Außerdem verwenden wir eine abweichende Hintergrundfarbe.
Die Body-Angaben wie üblich zwecks einheitlicher Browserdarstellung.

Damit ergibt sich folgender CSS-Code:

body
{
background-color: #ECF1EF;
font-family: Verdana, Arial, sans-serif;
font-size: 100.01%;
width: 100%;
height: 100%;
margin: 0;
padding: 0
}

#linksbox
{
float: left;
display: inline;
width: 18%;
margin: 0 1%;
padding: 0.5%;
background-color: #FFF8DC;
}

#content
{
padding: 0.5%;
float: left;
width: 60%;
background-color: #EEE8CD;
}

#rechtsbox
{
float: left;
display: inline;
width: 15%;
margin: 0 1%;
padding: 0.5%;
background-color: #CDC8B1;
}

Da hier alle drei Elemente links gefloatet sind, können wir sie im HTML-Teil in ihrer dargestellten Reihenfolge anordnen (bitte nach der letzten Box das Clearen nicht vergessen):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Dreispaltiges Layout mit flexibler Mitte</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="style01.css">
</head>
<body>
<h2><Dreispaltiges Layout mit prozentualen Containerbreiten></h2>
<div id="linksbox">Linksbox</div>
<div id="content">Content</div>
<div id="rechtsbox">Rechtsbox</div>
<div style="clear: both;"></div>
</body>
</html>

Wenn ihr nun mal euer Bildschirmfenster verkleinert werdet ihr feststellen, dass sich die drei Spalten immer proportionl der Bildschirmbreite anpassen.
Diese Technik hat jedoch auch Nachteile, auf die es hinzuweisen gilt: Z.B. dann, wenn ihr Grafiken einbaut, deren Pixelbreite größer ist, als die prozentuale Breite des Containers (umgerechnet in Pixel) in dem sie sich befindet. Oder wenn ununterbrochener Text einen größeren Platz benötigt, als es die prozentuale Containerbreite hergibt. In diesen Fällen kann es zu unschönenen Überlagerungen kommen.

Beispiel ansehen

nach oben