nicht angemeldet
Hallo,
ich habe folgendes Problem:
ich möchte mit CSS eine Seite mit gestalten, indem ich Elemente fix positioniere.
Die Elemente sind folgende (Reihenfolge entspricht der, wie sie im Browser angezeigt werden sollen):
- Header
- Main
- Footer
Die Elemente sollen im Quelltext so stehen, dass Main( der Hauptinhalt) oben steht.
Mein Quelltext sieht so aus:
<html-code>
<body>
<div id="documentDiv">
<div class="pageDiv">
<div id="pageMainDiv">MAIN<br>
<p>xx</p>
</div>
<div id="pageFooterDiv">FOOTER</div>
<div id="pageHeaderDiv">HEADER</div>
</div>
</div>
</body>
</html-code>
Mein zugehöriges css so:
<css-code>
body
{
background-color:#FFFFFF;
margin:0px;
font-family: Arial, Helvetica, sans-serif;
}
#documentDiv
{
height: 100%;
width:100%;
background-color:#FFFFFF;
text-align:center;
position:relative;
top:0px;
left: 0px;
}
.pageDiv
{
margin: 0px auto 0px auto;
padding:0px;
background-color:#FFFFFF;
width: 980px;
background-color:#000099;
border: 1px solid #FFFFFF;
text-align:left;
}
#pageHeaderDiv
{
margin: 0px;
padding:0px;
position:absolute;
top:0px;
height:100px;
background-color:#990000;
width: 980px;
clear:both;
}
#pageMainDiv
{
margin: 0px auto 0px auto;
padding:0px;
position:relative;
top:120px;
width: 980px;
background-color:#999900;
clear:both;
height: 100%;
}
#pageFooterDiv
{
margin: 0px auto 0px auto;
padding:0px;
width: 980px;
height:200px;
background-color:#FFFFFF;
position:relative;
clear:both;
}
</css-code>
Die Seite soll zentriert angezeigt werden.
Ich habe es erreicht, dass die Seite zentriert und die Elemente in gewünschter Reihenfolge angezeigt werden.
Nun mein Problem:
Der FOOTER soll aber immer unter MAIN stehen!
Wenn MAIN einen "großen" Inhalt hat, dann wird er unter FOOTER weitergeführt.
Wie schaffe ich es, dass FOOTER immer unter dem beiebig großen MAIN steht?
Gruß,
Floater