Hallo Community,
ich bin schon fast am verzweifeln und bitte daher um euren Rat.
Ich möchte den Footer auf meiner Seite ganz unten platzieren.
Was ich durch folgende CSS befehle realisieren wollte:
#footer
{
position: absolute;
bottom: 0;
}
Hatte mich belesen das es so funktionieren soll, doch leider klappt es bei mir nicht. Scheinbar stört sich der Footer-DIV an dem Menü-DIV. Denke es liegt daran das beide die Positionierung absolute erhalten haben. Wenn ich die Positionierung vom Menü-Div lösche, wird der Footer genau da platziert wo er eigentlich hin soll. Doch somit befindet sich mein Menü nicht dort wo es eigentlich sein sollte.
Habt ihr eine Idee was ich ändern könnte?
Wäre sehr dankbar.
Viele Grüße,
RobGe
anbei mal mein Quellcode:
CSS-Datei:
html
{
height: 100%;
}
body
{
margin: 0;
padding: 0;
height: 100%;
}
#container
{
background-color: #aeaeae;
width: 900px;
min-height: 100%;
height: auto !important;
height: 100%;
/* overflow: hidden !important; */
margin: auto;
padding: 0;
position: relative;
}
#header
{
width: 900px;
height: 200px;
}
#menu
{
position: absolute;
top: 275px;
left: 70px;
margin: 0px;
width: 200px;
}
#content
{
margin-left: 300px;
padding-bottom: 30px;
width: 500px;
clear: both;
}
#support
{
margin-left: 300px;
width: 500px;
}
#footer
{
position: absolute;
bottom: 0; /* wichtig */
margin: 20px;
margin-left: 200px;
text-align: center;
}
HTML-Datei:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="style.css" type="text/css" media="screen">
</head>
<body>
<div id="container">
<div id="header"> </div>
<div id="content">
<h3>Überschrift</h3>
ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text
</div>
<div id="support">
<h3>Überschrift 2</h3>
<p>noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text </p>
<div id="footer">© 2011 FOOTER</div>
</div>
<div id="menu">
Ganz viele Links
</div>
</div>
</body>
</html>