nicht angemeldet
Hallo Leute,
diesmal hab ich ein wirklich kniffliges Problem.
Im Hauptteil sollen alle Spalten gleich hoch sein, also das jede Spalte sauber zwischen Kopf- und
Fußzeile liegt. Die niedrigen Spalten, sollen sich an die höchste Spalte anpassen. Zur Positionierung
der Seitenelemente soll CSS verwendet werden. Natürlich soll die größtmögliche Browserkompatibilität
gewährleistet sein. Im Firefox ist bereits jetzt schon eine Überlappung, im IE nicht.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="generator" content="Adobe GoLive" />
<title>Vorlage</title>
<style type="text/css" media="screen"><!--
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
/* End hide from IE-mac */
/*Struktur - Vertikal*/
.container { }
.kopfzeile { width: 100%; border: solid 1px black; clear: both }
.hauptteil { background-color: #ffc800; width: 100%; height: auto; clear: both }
.fusszeile { top: 0; width: 100%; border: solid 1px black; }
/*Hauptteil - Unterteilung*/
.links { background-color: #ffc800; width:121px; float: left; }
.rechts { background-color: #efe037; width:145px; float: right; }
.mitte { background-color: #f8eb59; width:auto; margin-left:121px; margin-right:145px ; padding-right: 15px; padding-left: 15px; }--></style>
</head>
<body>
<div class="container">
<div class="kopfzeile">
Kopfzeile</div>
<div class="hauptteil">
<div class="links">
vvvvvvvvv<br />
vvvvvvvvv<br /><br />
vvvvvvvvvv</div>
<div class="rechts">
bbbbbbbbb<br />
bbbbbbbbb</div>
<div class="mitte">
ssssssssss<br />
aaaaaaaaa<br />
aaaaaaaaa</div>
</div>
<div class="fusszeile">Fusszeile</div>
</div>
</body>
</html>
Von der Seite http://jassesnee.de/easyclear stammt das "clearfix".
Ich hab stundenlang hin und her probiert, den clearfix in divs, aber komme auf keinen Nenner.
Deshalb schon jetzt danke für jede hilfreiche Lösung.