Schritt für Schritt Dokumentation eines 3-spaltigen Css-Layouts, mit Kopf und Fusszeile, das sich dem Browserfenster anpasst.
Am Ende der Dokumentation stelle ich 3 fertige Css-Layouts zum kostenlosen Download zur Verfügung.
Die Download-Datei enthält die HTML-Seite, einen Bilderordner und eine Css-Datei.
Es wäre schön, wenn das Copyright, das ich eingefügt habe, belassen werden würde.

Da meine Internetseiten (www.kevin-lucky.de, www.vfh-weinheim.eu, www.tool4web.de) ein Hobby von mir sind, hoffe ich, dass alles einigermaßen verständlich herüberkommt.
Aus diesem Grunde verzichte ich auch auf die vielen Fachausdrücke.

So sieht es aus
floatendes css layout

Zwecks besserer Darstellung, sind die einzelnen Seitenbereiche farbig hervorgehoben.
Wichtig dabei sind im Moment nicht die Details, sondern die generelle Vorgehensweise.
Das Layout wird von allen modernen Browsern korrekt dargestellt.
In meinem Beispiel werden die Hauptelemente folgendermaßen benannt:
#container
#header
#pathway
#sidebar 1
#sidebar 2
#main content
#footer
Da diese Elemente auf jeder Seite nur einmal vorkommen, bekommen sie eine eindeutige # id (z.B. <div id="header"></div>).
Elemente, die auf einer Seite vorkommen könnten, werden mit einer Klasse (.class) ausgezeichnet (z.B. .fltlft {
float: left;}.

Die Erstellung des HTML:

In einem Editor Ihrer Wahl erstellen Sie leere <div>-Elemente, die den Haupt-Containern entsprechen.
Diese Container werden mit Ihrem Seiteninhalt gefüllt und über eine Css-Datei nach Ihrem Webseitenlayout formatiert.

Praxisbuch Web 2.0, m. DVD-ROM
Zwischen den erklärenden und einordnenden Worten gibt es viele Codebeispiele, die für Web-2.0-Neulinge sehr aufschlussreich sein dürften.

Das Beispiel Layout:
<div id="container">"Er umschließt das komplette Layout wie einen Koffer, in dem die Kleidungsstücke geordnet werden."
<div id="header">
<div id="logo_li">"Hier steht Text oder eine Grafik"</div>
<div id="logo_re">"Hier steht Text oder eine Grafik"</div>
</div>
<div id="pathway">"Platz für Navigation, Suchfeld oder Wegweiser"</div>
<div id="sidebar1">"Beinhaltet in diesem Beispiel ein Navigation in Form einer ungeordneten Liste"
<div id="top">"Anfang Navigation"</div>
<div id="navi">
<ul>
<li><a href="#">Ihr Link</a></li>
<li><a href="#">Ihr Link</a></li>
<li><a href="#">Ihr Link</a></li>
<li><a href="#">Ihr Link</a></li>
<li><a href="#">Ihr Link</a></li>
</ul>
</div>
<div id="bottom">"Ende Navigation"</div>
</div>
</div>"Ende Sidebar 1"
<div id="sidebar2"></div>
<div id="maincontent">"Hier steht der eigentliche Inhalt Ihrer Seite mit Text und Bildern usw."</div>
<div id="footer">"kann ein Copyright und dergleichen beinhalten"</div>
</div> 

Wichtig: Benutzen Sie für Ihr Dokument eine Documenten Type Declaration (DOCTYPE). Wie diese auszusehen hat und welche Auswirkungen sie hat, erfahren Sie bei http://de.selfhtml.org/html/allgemein/grundgeruest.htm (oder kopieren Sie sich das Doctype aus dem Quellcode dieser Seite).

Die Formatierung der Css-Datei:
Die Formatierung des Css bestimmt wie am Ende Ihre Webseite im Browser dargestellt wird.
Testen Sie des öfteren in verschiedenen Browsern (Firefox, Internetexplorer, Mozilla), ob die Formatierung Ihrern Wünschen entspricht.

Ist die Webseite einmal fertig gestellt, sollte man sie auf korrekten Syntax überprüfen. W3C, ist für die Entwicklung von (X)HTML und CSS zuständig und bietet einen Validator (Prüfer) für (X)HTML und für CSS an.

body { color: black; margin: 0; padding: 0;
/* Es empfiehlt sich, margin und padding des Body-Elements auf 0 einzustellen, um unterschiedlichen Browser-Standardeinstellungen gerecht zu werden. */
text-align: center;
/* Hierdurch wird der Container im Browser zentriert, die Schrift ist jetzt mittig ausgerichtet. */
font-size: 95%; font-family: "Trebuchet MS", Arial, Helvetica, }

#container { width: 100%;
text-align: left; /* Hier wird die Einstellung text-align: center im Body-Element wieder überschrieben, die Schrift ist wieder linksbündig. */ }

#header { background-color: aqua; height: 150px; }
#logo_re { background-color: blue; width: 200px; height: 150px; float: right; padding-left: 10px; }
#logo_li { background-color: blue; width: 300px; height: 150px; float: left; padding-left: 10px; }
#pathway { background-color: fuchsia; height: 25px; padding-top: 10px; padding-left: 100px; }
#sidebar1 { background-color: gray; background-image: none; background-position: 0 0; float: left; width: 12em; padding: 15px 0 15px 10px; }

/* Beginn Navigation. */
#top { background-color: green; width: 150px; height: 30px; margin-top: 100px; margin-bottom: 0; margin-left: 10px; }
#navi { background-color: green; width: 150px; margin-top: 0; margin-bottom: 0; margin-left: 10px; }
#navi ul { margin: 0; padding: 0; list-style-type: none; display: block; }
#navi li{ background-color: green; height: 30px; margin-top: 0; margin-right: 0; margin-bottom: 0; padding: 0; }
#navi li a { color: black; font-size: 90%; height: 25px; }
#navi li a:link, #navi li a:visited { padding-left: 40px; }
#navi li a:hover{ }
#bottom { background-color: green; width: 150px; height: 30px; margin-top: 0; margin-bottom: 0; margin-left: 10px; }
/* Ende Navigation. */

#sidebar2 { float: right; width: 8em; background: gray; padding: 15px 0; }
#mainContent { background-color: #afaeae; margin-top: 0; margin-right: 9em; margin-left: 14em; padding-bottom: 10px;
/* Mit margin wird erreicht, dass der main-content zwischen sidebar1 und sidebar2 rutscht. Padding bewirkt, dass der Inhalt nicht am äußeren Rand klebt.*/ }
#footer { background-color: lime; padding: 0 10px; height: 40px; }
.fltrt { /* Mit dieser Klasse können Sie ein Element auf der Seite nach rechts fließen lassen; z.B. Werbung, News. */
float: right; }
.fltlft { /* Mit dieser Klasse können Sie ein Element auf der Seite nach links fließen lassen. */
float: left;
}
.clearfloat { clear:both; height:0; font-size: 1px; line-height: 0px;
/* Diese Klasse sollte in einem div- oder break-Element platziert werden und das letzte Element vor dem Schließen eines Containers sein, der wiederum einen vollständigen Float enthalten sollte. */ }