nicht angemeldet
3-Spalten-Problem ; Clearfix
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.
-
Hallo,
das problem mit den Spalten habe ich nun fast selbst gelöst, aber trotzdem treten noch Darstellungsfehler auf im Firefox und der IE weigert sich konsequent. Hinter dem letzten div-Tag im Hauptteil habe ich das clearfix gestellt, <div class="clearfix"></div> und statt clearfix:after steht jetzt clearfix:before da. Mit einer festvorgegebenen Größe, 100%, für alle drei Spalten funktionierts auch nicht, der Inhalt bleibt nicht in der Spalte.Kennt sich da einer von euch aus? Wie kann man das beheben?