Layouts mit fester Breite haben einen Vorteil. Sie können alle Bereiche einer Seite mit so darstellen, dass sie für alle Bildschirmgrößen die selbe Darstellung erreichen. Durchgesetzt hat sich eine feste Breite von 960 Pixel, da diese auf fast allen Bildschirmen darstellbar ist. Bei größeren Bildschirmen wird der Inhalt zentriert und auf beiden Seiten leere Flächen dargestellt. Da moderne Bildschirme mittlerweile aber eine Auflösung von 1920*1080 und auch größer haben, bleibt durch fixe Layouts viel ungenützter Platz übrig.
Um den Platz den moderne Monitore bieten zu nützen und trotzdem auch auf kleineren Bildschirmen eine gute Darstellung zu erzielen, kann man Layouts mit variabler Breite einsetzen (sog. Fluid-Layouts), die sich immer an die Größe des Browser-Fensters bzw. des Bildschirms anpassen. Klingt prinzipiell einfach, da ja Breiten in CSS nicht nur in Pixel, sondern auch in Prozent angegeben werden können. Strukturiert man den Code aber wie in einem Layout mit fester Breite und ersetzt alle festen Angaben durch relative Werte sind alle Bereiche der Seite variabel (inkl. einer evtl vorhandenen rechten und linken Sidebar).
Ein Layout mit Kopf- und Fußzeile, sowie linkem, rechtem und Content-Bereich könnte dann in etwa so aussehen:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html >http://www.w3.org/1999/xhtml">
<head>
<title>Alle Bereiche variabel</title>
<style type="text/css">
body
{
margin: 0;
padding: 0;
background-color: #333333;
min-width: 960px;
}
div
{
height: 400px;
font-family: Verdana;
color: #FFFFFF;
font-size: 20px;
text-align: center;
}
#header,
#footer
{
height: 50px;
border-bottom: solid #AAAAAA 1px;
clear: both;
float: none;
}
#footer
{
border-top: solid #AAAAAA 1px;
border-bottom: 0px;
}
#left,
#right
{
float: left;
width: 20%;
border-left: solid #AAAAAA 1px;
}
#left
{
border-right: solid #AAAAAA 1px;
border-left: 0px;
}
#content
{
float: left;
width: 59%;
}
</style>
</head>
<body>
<div id="header">HEADER</div>
<div id="left">LEFT SIDEBAR</div>
<div id="content">CONTENT</div>
<div id="right">RIGHT SIDEBAR</div>
<div id="footer">FOOTER</div>
</body>
</html>
Will man den linken und rechten Bereich in fester Größe haben muss man die Struktur umstellen. Die Reihenfolge der Elemente im Code ist nun nicht mehr wie in der Darstellung von links nach rechts, sondern man schreibt zuerst das Element „left“ (mit float: left), dann das Element „right (mit float: right) und dann den Content (ohne float, stattdessen mit einem Innenabstand links und rechts der der Breite der beiden Sidebars entspricht). Der Code sieht dann wie folgt aus:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html >http://www.w3.org/1999/xhtml">
<head>
<title>Nur Content-Bereich variabel</title>
<style type="text/css">
body
{
margin: 0;
padding: 0;
background-color: #333333;
min-width: 960px;
}
div
{
height: 400px;
font-family: Verdana;
color: #FFFFFF;
font-size: 20px;
text-align: center;
}
#header,
#footer
{
height: 50px;
border-bottom: solid #AAAAAA 1px;
clear: both;
float: none;
}
#footer
{
border-top: solid #AAAAAA 1px;
border-bottom: 0px;
}
#left
{
float: left;
width: 200px;
border-right: solid #AAAAAA 1px;
}
#right
{
float: right;
width: 200px;
border-left: solid #AAAAAA 1px;
}
#content
{
padding-left: 200px;
padding-right: 200px;
}
</style>
</head>
<body>
<div id="header">HEADER</div>
<div id="left">LEFT SIDEBAR</div>
<div id="right">RIGHT SIDEBAR</div>
<div id="content">CONTENT</div>
<div id="footer">FOOTER</div>
</body>
</html>
Ergebnis ist, dass man ein Fluid-Layout einsetzen kann, welches auf größeren Monitoren besser aussieht und keinen Platz „verschwendet“, aber trotzdem die Navigation oder andere Elemente in den Sidebars mit fixer Größe darstellt, da sich nur der eigentliche Inhalt an das Fenster anpasst.
Ist doch cool, oder?
