Zum Abschluss ein praxistaugliches, funktionierendes Beispiel mit einem Header, drei Float-Inhaltsspalten und dem Footer:
<div id=“page“> <div id=“header“>...</div> <div id=“content“> <div id=“sidebar“>...</div> <div id=“primary-content“>...</div> <div id=“misc-content“>...</div> <div class=“clearing“></div> </div> <div id=“footer“>...</div> </div>
Listing 5
Die passenden CSS-Deklarationen:
html, body {
height:100%;
}
#page {
position:relative;
min-height:100%;
}
#header {
width:980px;
}
#content {
width:980px;
padding:0 0 50px 0;
}
#sidebar {
position:relative;
width:180px;
float:left;
}
#primary-content {
position:relative;
width:550px;
float:left;
}
#misc-content {
position:relative;
width:250px;
float:left;
}
.clearing {
clear:both;
height:0;
padding:0;
border:0;
margin:0;
font-size:0;
line-height:0;
}
#footer {
position:absolute;
bottom:0;
width:980px;
height:50px;
}
Listing 6
Das Element „clearing“ sorgt hier dafür, dass das Floating der drei Contentspalten aufgehoben wird und der nachfolgende Footer durch den Inhalt nach unten verschoben werden kann. Die restlichen CSS-Angaben stellen sicher, dass dieses Element keinerlei visuellen Einfluss auf die Seite hat. Die Breitenangaben der Spalten sind unerlässlich für korrektes Floating im IE/Windows.
Dieses HTML/CSS-Grundgerüst leistet gute Dienste als Basis-Markup für entsprechende Projekte und lässt mehr Zeit für die Erstellung von validen, kompatiblen, erreichbaren und suchmaschinenfreundlichen HTML-Seiten. Über den Softlink können alle Listings als Zip-Datei heruntergeladen werden.
Benjamin Niediek ist Mediengestalter für Digital- und Printmedien und studiert Medieninformatik & Gestaltung an der Universität Bielefeld. Er arbeitet seit 5 Jahren bei der Firma HDNET als Creative Director und ist vor allem für Screendesign und Frontendprogrammierung umfangreicher TYPO3-Projekte verantwortlich.
