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