nicht angemeldet
Ich möchte ein Layout (kopfzeile, zweigeteilter Mittelbereich und Fusszeile) realisieren. Zusätzlich soll, wenn der Bereich nicht die ganze Seite füllt, die Fusszeile immer unten stehen. Beides habe ich realisiert bekommen (mit dem "min-height-hack").
Mein einziges Problem ist jetzt, dass ich normaler Weise den gesamten Inhalt in ein DIV "Seite" packe um es auf eine bestimmte Breite zu beschränken und zentriert auszurichten. Geht eigentlich auch ganz einfach mit:
.seite {
width: 990px;
margin-left: auto;
margin-right: auto;
text-align: left;
border:1px solid #C0C0C0;
}
Leider geht dann die Anweisung mit der Fusszeile ganz unten nicht mehr.
Eine Lösung hierfür wäre noch die Höhe height:100% für .seite anzugeben. Dann geht es im IE einwandfrei und bei wenig Inhalt auch bei Firefox (mit kleinem Schönheitsfehler).
Wenn ich jedoch mehr Inhalt reinschreibe geht beim Firefox der Text aus dem .inhalt und über die Border von .seite. Das sieht ziemlich doof aus.
Wie kann ich dieses Problem lösen, dass es in beiden Browsern wie gewollt läuft? Hier mal der komplette Code der im IE läuft und im FF diesen "Überlauf"-Fehler erzeugt:
______________________________________________________________
______________________________________________________________
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<title>Layout</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
html, body {
height: 100%;
}
body {
margin: 0;
padding: 0;
}
.seite {
height: 100%;
width: 990px;
margin-left: auto;
margin-right: auto;
text-align: left;
border:1px solid #C0C0C0;
}
.prop {
height: 100%;
float: right;
width: 1px;
margin: -150px 0 -51px 0;
}
.inhalt {
padding: 5px;
width: 770px;
margin: 0 0 0 0;
overflow:visible;
border 1px solid #C0C0C0;
}
.info {
float: right;
width: 200px;
margin: 0 0 0 0;
padding: 5px 0 0 5px;
border-left: 1px solid #C0C0C0;
border-bottom: 1px solid #C0C0C0;
}
.kopf {
height:150px;
background:#e6e6e6;
border-bottom:1px solid #C0C0C0;
}
.fuss {
clear:both;
background:#e6e6e6;
height:50px;
border-top:1px solid #C0C0C0;
}
</style>
</head>
<body>
<div class="seite" align="center">
<div class="kopf">Kopfzeile</div>
<div class="prop"></div>
<div class="info">
Hier steht Text.<br>
Der kann ziemlich lang sein.<br>
<br>
<br>
Wirklich!!!!<br>
<br>
<br>
Hier steht Text.<br>
Der kann ziemlich lang sein.<br>
</div>
<div class="inhalt">
Hier steht Text.<br>
Der kann ziemlich lang sein.<br>
<br>
<br>
Wirklich!!!!<br>
<br>
<br>
Hier steht Text.<br>
Der kann ziemlich lang sein.<br>
<br>
<br>
Wirklich!!!!<br>
<br>
<br>
Hier
<br>
<br>
Hier steht Text.<br>
Der kann ziemlich lang sein.<br>
<br>
<br>
Hier steht Text.<br>
Der kann ziemlich lang sein.<br>
<br>
<br>
Wirklich!!!!<br>
<br>
<br>
Hier
<br>
<br>
Hier steht Text.<br>
Der kann ziemlich lang sein.<br>
<br>
<br>
Hier steht Text.<br>
Der kann ziemlich lang sein.<br>
<br>
<br>
Wirklich!!!!<br>
<br>
<br>
Hier
<br>
<br>
Hier steht Text.<br>
Der kann ziemlich lang sein.<br>
<br>
<br>
Hier steht Text.<br>
Der kann ziemlich lang sein.<br>
<br>
<br>
Wirklich!!!!<br>
<br>
<br>
Hier
<br>
<br>
Hier steht Text.<br>
Der kann ziemlich lang sein.<br>
<br>
</div>
<div class="fuss">Fußzeile</div>
</div>
</body>
</html>
__________________________________________________
__________________________________________________
Danke für eure Hilfe
Marco