Positionierungsproblem

[Thomas J.]

Tach allerseits

Ich schlage mich mit folgendem Konstrukt herum:

+----------+--------------------+
  |    1     |        2           |
  +----------+--------------------+
  |          |                    |
  |    3     |        4           |
  |          |                    |
  +----------+--------------------+
  |            5                  |
  +-------------------------------+

Dabei gelten folgende "Regeln":

• Das ganze soll zentriert und auflösungsunabhängig
    sein (ergo %-Werte).
• [3] und [4] habe variable Höhen
• [5] soll sich (unabhängig davon welcher der beiden darüber
    liegenden Bereiche höher ist) nahtlos unten anschließen.
• [4] enthält den eigentlichen Inhalt und soll später nach
    Möglichkeit auch von einem DAU mit Text gefüllt werden können.
    Deshalb -so die Bitte- möge [4] doch im Quelltext gleich ganz
    oben stehen.

Mein derzeitiger Stand ([1] und [2] habe ich weggelassen, da absolut positioniert und somit kein Problem):

<div id="container"> //Den brauche ich für Opera
 <div id="vier">
  <p>Hier steht viel Text ...</p>
  <p>Text</p>
  <p>Text</p>
 </div>

<div id="drei">
  <p>... und hier tausend Links.</p>
  <p>usw.</p>
 </div>
 <div id="fuenf">das soll unten sein</div>
</div>

-----------------------------------------------

#container {
    position:absolute;
    left:0;
    top:70px;
    margin:0;
    padding:0;
    width:100%;
    }

#vier {
    width:65%;
    margin-right:5%;
    float:right;
    background:red;
    }

#drei {
    width:25%;
    margin-left:5%;
    background:green;
    }

#fuenf {
    clear:both;
    position:relative;
    left:5%;
    top:0;
    width:90%;
    background:white;
    height:24px
    }

Das ganze sieht in Mozilla tatsächlich so aus, wie es gedacht ist.

Opera 6.03 versetzt [4] aus welchen Gründen auch immer um 1 Pixel nach rechts. Damit könnte ich zur Not leben, auch wenn ich es nicht verstehe.
  +----------+--------------------+
  |    1     |        2           |
  +----------++-------------------++
  |          ||                    |
  |    3     ||        4           |
  |          ||                    |
  +----------++-------------------++
  |            5                  |
  +-------------------------------+

Was jedoch der IE daraus macht, spottet jeder Beschreibung.
  +----------+--------------------+
  |    1     |        2           |
  +--+---+--------------------+---+
  |  |   |                    |
  |3 |   |        4           |
  |  |   |                    |
  +--+---+--------------------+---+
  |            5                  |
  +-------------------------------+

Nun ja (dachte ich), baue ich eben für den IE eine eigene Version und biege das anschließend über Selektoren wieder gerade.
Pustekuchen. So wie die Div's im Quelltext notiert sind, kriege ich es auch mit den tollsten Klimmzügen nicht hin.

Hat jemand eine Idee?

Thomas J.