Dies ist die linke Navigationsleiste. Der div-Container weist die gleiche Breite auf wie der linke Rand von ebene1. Er ist absolut positioniert – sein Bezugssystem ist also das HTML-Dokument.


#lftBar {
position:absolute;
width:143px;
top:9px;
left:9px;}

Dies ist die rechte Navigationsleiste. Der div-Container ist absolut positioniert und liegt in ebene2, damit er auf der gleichen Höhe wie der Hauptinhalt unter der oberen Navigationsleiste und ihrem Werbeblock liegt.

#rgtBar {
position: absolute;
width: 143px;
top: 0;
right: 0 }

Dies ist die Tippbox. Sie wächst mit ihrem Inhalt, aber nicht bis an das Ende der Seite. Die Box wird so lang wie ihr Inhalt und endet dann. Hinter der "Tippbox" wird der Inhalt wieder über die gesamte Breite der mittleren Spalte verlaufen.

#tipDay {
float: right;
width: 175px;
background: white;
position: relative;}

#main { background:#CCC;}

Hier wird der Inhalt stehen. Und das ist der HTML-Code dieser Seite:

...
<style>
body { margin:9px 9px 0 9px;
padding:0px 0px; background: white }
#ebene0 { background: khaki; width: 100% }
#ebene1 { margin-left: 143px; padding-left: 9px;
background: white }
#ebene2 { background:khaki; position:relative;
width: inherit;}
#ebene3 { margin-right: 143px; padding-right: 9px;
background: white }
#main { background: white }
#navleiste { background: darkkhaki }
#logoleiste { background: khaki }
#tipDay { float: right; width: 175px; background: wheat; position: relative }
#lftBar { position: absolute; width: 143px; top: 9px; left: 9px;}
#rgtBar { position: absolute; width: 143px; top: 0px; right: 0px }
</style>
...
<body>
<div id="lftBar">
Dies ist die linke Navigationsleiste ...
</div>
<div id="ebene0">
<div id="ebene1">
<div id="navleiste">
Dies ist die obere Navigationsleiste.
<div id="logoleiste">
Dies ist der Block für ein Logo.
</div>
</div>
<div id="ebene2">
<div id="rgtBar">
Dies ist die rechte Navigationsleiste ...
</div>
<div id="ebene3">
<div id="main">
<div id="tipDay">
Hier schwebt die Tippbox ...
</div>
</div>
</div>
</div>
</div>
</div>
</body>
...