Harry Hunt
New member
Ich hab' das neulich mal als Antwort auf eine Frage in Webdesign -> Allgemeines geschrieben, aber das schadet bestimmt nichts, das hier zu "archivieren", für den Fall, dass es jemand mal braucht.
Also, hier ist ein einfaches Beispiel wie man ein dreispaltiges Layout ohne Tabellen umsetzen kann. Dabei gibt es links und rechts jeweils eine Spalte mit fester Breite und in der Mitte eine Spalte, die sich der Bildschirmauflösung anpasst (daher auch Liquid-Layout).
Das ganze wird in allen aktuellen und den meisten älteren Browsern korrekt angezeigt.
Also, hier ist ein einfaches Beispiel wie man ein dreispaltiges Layout ohne Tabellen umsetzen kann. Dabei gibt es links und rechts jeweils eine Spalte mit fester Breite und in der Mitte eine Spalte, die sich der Bildschirmauflösung anpasst (daher auch Liquid-Layout).
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<style type="text/css">
body {
padding: 0;
margin: 0;
}
#header {
background: #F00;
height: 200px;
padding: 10px;
}
#footer {
clear: left;
background: #FF0;
height: 100px;
}
#leftcolumn {
width: 150px;
background: #0F0;
float: left;
}
#rightcolumn {
width: 150px;
background: #00F;
float: right;
}
#centercolumn {
margin: 0px 200px 0px 200px;
}
</style>
</head>
<body>
<div id="header">
<h1>Tolle Seite</h1>
</div>
<div>
<div id="leftcolumn">
Links
</div>
<div id="rightcolumn">
Rechts
</div>
<div id="centercolumn">
Fließtext hier
</div>
</div>
<div id="footer">
Footertext
</div>
</body>
</html>Das ganze wird in allen aktuellen und den meisten älteren Browsern korrekt angezeigt.
Zuletzt bearbeitet:
