wie wärs mal mit einem demolink wo das problem auftritt
einerseits: dein code ist ziemlich ungültig und es ist ein wunder, dass alles so funktioniert wie du es möchtest
wenn du mit css arbeiten willst, ist es essentiell wichtig, dass du gültigen code verwendest und jeder browser im standardkonformen modus arbeitet (besonders der internet explorer)
behebe zuerst diese fehler
anschließend:
position absolute sollte nur eingesetzt werden, wenn man GENAU weiss, was man tun - in deinem fall ist die verwendung, ohne zu übertreiben, überflüssig
wenn elemente aus dem textfluss genommen werden (mittels position absolute zb) wirken sie sich nicht mehr auf die umgebenden elemente aus
da dein inhaltsbereich mittels position absolute an seine stelle gebracht wurde, wachsen sowohl body alsauch html nicht mit - dein footer ist somit unten dran positioniert und wird immer an exakt der selben stelle kleben, egal wie lang der inhalt wird
möglichkeit 1:
ignoriere alles bisher gesagte, verfrachte den footer in deinen inhalt und positioniere ihn in ihm an seinem unteren ende - das wird mit glück funktionieren
diese möglichkeit ist aber ziemlich irre, da du über kurz oder lang auf fehler stoßen wirst, die sich nicht mehr ändern lassen - mit deinem aktuellen code wird die seite unkontrollierbar (besonders in browsern, die du nicht kennst)
wenn du zb dein browserfenster kleiner oder größer machst, fällt dein design auseinander oder überlagert sich
möglichkeit 2:
du willst etwas lernen
erstelle eine kopie deiner seite und beginne neu
in das <http://de.selfhtml.org/html/allgemein/grundgeruest.htm@title=html grundgerüst> fügst du folgenden html-schnipsel ein
<div id="container">
<h1><a href="/">miniwettbewerb.de</a></h1>
<div id="content">
<p>lorem ipsum</p>
</div>
<div id="sidebar">
<ul id="menu1">
<li><a href="#">menüpunkt</a></li>
<li><a href="#">menüpunkt</a></li>
<li><a href="#">menüpunkt</a></li>
</ul>
<ul id="menu2">
<li><a href="#">menüpunkt</a></li>
<li><a href="#">menüpunkt</a></li>
<li><a href="#">menüpunkt</a></li>
</ul>
<form name="login" action="#" method="post">
<!-- dein restliches zeug -->
</form>
</div>
<address id="footer">© foo bar baz</address>
</div>
Anm: ja, es sind einige redundate elemente dabei, man kann durchaus noch etwas code sparen - aber so ist es verständlich zu formatieren
mit diesem code (hoffentlich valide ;)) kannst du dein aktuelles design denke ich umsetzen
und das prinzipielle css sollte so aussehen:
#container erhält eine bestimmte breite
#content erhält float: right
#sidebar ebenfalls
#menu1 wird absolut nach oben positioniert (ja, in den fall ist es sinnvoll)
#menu2 ist da wo es ist
das forumlar ebenfalls
das address-element stellt den textfluss mittels clear wieder her