johannes123: div absolute unten positionieren mit -500px

Beitrag lesen

Hallo,
ich hab ein Problem und zwar möchte ich ein div mit einer höhe von z.b. 500px unten positionieren man soll aber nur die hälfte des divs sehn deshalb hab ich das div absolute positioniert mit bottom: -250px; das klappt aber leider nicht wie es soll(guckt euch das am besten selbst an hab leider kein Server zum hochladen).  Bei position: fixed klappt das auf den ersten blick zwar ganz gut allerdings überlappt das div bei kleineren Browser Fenstern den Content.

Ich hoffe ihr könnt mir helfen.
Gruß Johannes

<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>Unbenanntes Dokument</title>  
<style type="text/css">  
* {  
margin: 0;  
padding: 0;  
}  
  
html, body {  
height: 100%;  
}  
  
p, h1 {  
padding-bottom: 10px;  
}  
  
#wrapper {  
position: relative;  
min-height: 100%;  
background: #A9A9A9;  
}  
  
#content {  
padding: 1em 1em 2.5em 1em;  
}  
  
#footer {  
position: absolute;  
bottom: 0;  
width: 100%;  
line-height: 1.5em;  
text-align: center;  
background: #8B8878;  
}  
#pad {  
	position: absolute;  
	bottom: -250px;  
	width: 400px;  
	line-height: 1.5em;  
	text-align: center;  
	background-color: #0FC;  
	height: 500px;  
}  
</style>  
</head>  
  
<body>  
<div id="wrapper">  
<div id="content">  
<h1>Unten platzierter Footer</h1>  
<p>Der Footer befindet sich am unteren Rand des Wrappers</p>  
</div><!--Ende #content-->  
<div id="footer">  
Footer<div id="pad"></div>  
</div><!--Ende #footer-->  
</div><!--Ende #wrapper-->  
  
</body>