Conny: Dreispaltiges Layout mit Kopf- und Fußzeile

Beitrag lesen

Hallöchen,

ein (hoffentlich nur) kleines Problem, für das es bestimmt bereits jede Menge Informationen gibt, aber ich weiß nicht so recht, wie ich direkt nach meinem Problem suchen soll. Deswegen hier meine Beschreibung, wer einen Link oder eine Erklärung für mich hat, bitte melden. (Links auf deutschsprachige Seiten wären mir lieb, da ich mit Fremdsprachen eher Probleme habe.)

Es handelt sich um ein dreispaltiges Layout mit Kopf- und Fußzeile:

-------------------------
|                       |
-------------------------
|   |               |   |
|   |               |   |
|   |               |   |
|   |               |   |
|   |               |   |
|   |               |   |
|   |               |   |
|   |               |   |
-------------------------
|                       |
-------------------------

Der mittlere Bereich soll links und rechts die gleiche Farbe und in der Mitte eine andere Farbe haben, wobei diese Farbe ganz bis nach unten reichen soll. Ich habe das folgendermaßen gelöst:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head></head>
<body>
<div class="container">
    <div class="oben"></div>
    <div class="rechts"></div>
    <div class="links"></div>
    <div class="mitte"><div style="clear:both;">&nbsp;</div></div>
    <div class="unten">&nbsp;</div>
</div>
</body>
</html>

.container { background-color:#;}
(Das ist die Farbe, die dann links und rechts zu sehen ist. Oben, unten und mitte werden einzeln definiert bzw. mit Bild belegt.)

.oben { background-color:#;}
.links { float:left; width:150px;}
.rechts {float:right; width:150px; }
.mitte { margin-left:150px; margin-right:150px; background-color:#;}
.unten { background-color:#;}

Das Problem entsteht nun, wenn im mittleren Teil weniger Inhalt vorhanden ist als in den Seitenbereichen: Das div, das im <div class="mitte"> enthalten ist, braucht der Firefox, weil er ansonsten die Farbe der mittleren Spalte nicht bis ganz runter zieht, der IE dagegen bleibt genau an dieser Schreibweise hängen und zeigt den Inhalt nicht bzw. nur teilweise an. Er wäre mit dem clear:both; in .unten völlig zufrieden.

Wie kann ich das lösen, ohne lauter dämliche <p>&nbsp;</p> einzufügen, bist der innere Bereich genug aufgebläht ist, oder einen sonstigen Unsinn anzustellen?

Gruß,
Conny

PS: Eine andere Sache am Rande: momentan passt sich ja alles an die Menge des Inhalts an. Wie könnte ich denn eine feste Höhe erreichen, die sich jedoch mit mehr Inhalt ausdehnt? Ich hatte ein bischen mit height und min-height herumgespielt, aber da muckte auch einer der beiden Browser und zeigte zwar den Inhalt an, dehnte aber das Grunddesign nicht mit aus.