Frank: 2 x div fixed, 1x div vertikal zentriert

Beitrag lesen

Hallo zusammen,

ich habe ein Problem mit einem CSS-Layout. Es soll oben und unten jeweils ein fixed div geben. Der Content dazwischen soll (soweit der Content nicht den gesamten Platz verwendet) immer genau zentriert zwischen den beiden fixed divs erscheinen. Hier einer meiner bisherigen Versuche:

  
<!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>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>2 x fixed, 1 x middle</title>  
<style type="text/css">  
<!--  
html, body {  
 margin:0;  
 padding:0;  
}  
body, td, th {  
 font-family: Arial, Helvetica, sans-serif;  
 font-size: 11px;  
 color: #000000;  
}  
a {  
 font-size: 11px;  
 color: #0099FF;  
 text-decoration: none;  
}  
a:hover {  
 color: #993300;  
 text-decoration: none;  
}  
#header {  
 width: 900px;  
 height: 100px;  
 position: fixed;  
 left: -450px;  
 top: 0px;  
 margin-left: 50%;  
 z-index: 100;  
 background-color: #CC9900;  
}  
#content {  
 width: 900px;  
 position: relative;  
 left: -450px;  
 top: 100px;  
 bottom: 50px;  
 margin: 0 0 0 50%;  
 padding: 0;  
 z-index: 50;  
 background-color: #339999;  
}  
#footer {  
 width: 900px;  
 height: 50px;  
 position: fixed;  
 left: -450px;  
 bottom: 0px;  
 margin-left: 50%;  
 z-index: 100;  
 background-color: #FFCC99;  
}  
-->  
</style>  
</head>  
<body>  
<div id="header">"header"</div>  
<div id="content">  
 "content"  
 <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />  
 <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />  
 "content Ende"  
</div>  
<div id="footer">"footer"</div>  
</body>  
</html>  

Bin für jede Hilfe wirklich dankbar. Ich versuche mich jetzt schon seit Tagen daran und komme einfach nicht weiter.

Viele Grüße
Frank