Hallo,

habe schon einige Themen gesucht und angeschaut, bringt mir aber nicht wirklich eine Antwort:

Ich habe eine Seite gebaut mit einem Div als Header. Dann habe ich absolute ein Div Element als Content positioniert, was allerdings (des Designs wegen) ein wenig über das Header Div überlappt. Neben dem Content Div habe ich (wieder absolut) eine Navigation platziert. Im Content Div folgen dann weitere Divs für Werbung, verschachtelt. Wenn ich nun den Footer absolute platziere bringt mir das nichts. Bei mehr Content bleibt der Footer ja "Mitten im Raum stehen".

Nun meine Frage wie stelle ich es an den Footer da hinzubekommen, ohne das dadurch mein Content an den Header anschließt? (Das überlappen soll bestehen bleiben)

Hier mal mein Code:

HTML-Code:

<div id="header">
  <span class="logo"><h1>myBETstats</h1></span>
 </div>
 <div id="navileft"></div>
 <div id="content">
  <div id="werbung">
   <div id="ads">
    <a href="seite" target="_blank"><img src="images/werbung.jpg" alt="Werbung" class="werbung" /></a>
   </div>
  </div>
 </div>
 <div id="footer"></div>

CSS:

HTML-Code:

#header{
	width:100%;
	height:10%;
	background:#68bbd0;
	color:white;
	min-width:800px;
	min-height:50px;
	border-top: solid 4px #2fa6c4;
	border-bottom: solid 2px #1c92b0;
}
#header span{
	font:0.9em verdana;
	position:absolute;
	left:20px;
	top:10px;
}
#content{
	position:absolute;
	left:15%;
	top:5%;
	width:80%;
	background:white;
	min-height:70%;
	height:auto;
	border:solid 1px #005368;
	border-top:solid 4px #005368;
}
#werbung{
	position:absolute;
	left:0%;
	top:1%;
	width:100%;
	background:#c2dae0;
	color:#0f3d49;
	min-height:80px;
	border-bottom:solid 2px #9fc4cd;
	border-top:solid 2px #9fc4cd;
}
#ads{
	position:absolute;
	left:5%;
	top:10px;
	width:100%;
	height:60px;
}
#ads img.werbung{
	border:0;
}
#navileft{
	position:absolute;
	width:15%;
	left:0;
	top:7.5%;
	min-height:70%;
	background:white;
	border-top:solid 4px #e5e5e5;
}
#footer{
	background:#e5e5e5;
	position:absolute;
	left:0;
	top:90%;
	width:100%;
	min-height:10%;
	height:10%;
	border-bottom:solid 4px #c1c1c1;
	border-top:solid 2px #9d9d9d;
}

Habs auch mit relativer positionierung versucht, aber er will meinen Footer immer am Header anstellen. Habe sogar versucht einen Container zu bauen um meinen ganzen Inhalt, nachdem ich dann einen Footer anstelle, aber das war irgendwie auch nicht das Gelbe vom Ei.

Jemand eine Idee?