Michael: Ergänzen nach oben und unten

Beitrag lesen

Danke für die Idee - funktioniert mit dem FF ganz gut, allerdings beim Internet Explorer wieder weniger :-(

ups, ja,
ab dem Tage, an dem der IE css-Anweisungen korrekt interpretiert, wird's langweilig werden.
Aber in diesem Fall ist's ja kein großes Problem.
Definieren wir doch die Hintergrundposition wie die Inhaltsbox selbst auch über ein Offset.

  
<html>  
<head>  
<style type='text/css'>  
html,body{  
   margin: 0px;  
}  
  
#offset,#hintergrund_offset,  
#oben, #unten, #mitte{  
   position: absolute;  
}  
#oben, #unten, #mitte{  
   width: 600px;  
}  
  
#offset{  
   left: 50%;  
   top: 50%;  
}  
#hintergrund_offset{  
   left: 50%;  
   top: 0px;  
   height: 100%;  
}  
#oben{  
   top: 0px;  
   left: -300px;  
   height: 50%;  
   background: yellow;  
}  
#unten{  
   top: 50%;  
   left: -300px;  
   height: 50%;  
   background: orange;  
}  
#mitte{  
   height: 300px;  
   top: -150px;  
   left: -300px;  
   background: cyan;  
}  
</style>  
</head>  
  
<body>  
  
<div id='hintergrund_offset'>  
   <div id='oben'></div>  
   <div id='unten'></div>  
</div>  
  
<div id='offset'>  
   <div id='mitte'>  
   Inhalt  
   </div>  
</div>  
  
  
</body>  
</html>  

Das sollte so nun in allen Browsern funktionieren.

Einzige Einschränkung:
Wenn das Browserfenster schmaler ist, als Dein Inhalt,
dann bekommst Du leider keinen Scrollbalken.

Gruß,
Michael