DIVs layouten - vermutlich eine sehr einfache Frage

Computer: Software & Programmierung HTML & CSS
#1

Hallo Ihr Profis,

wieder einmal scheitere ich an der Ausrichtung meiner DIVs. Ich möchte folgendes erreichen:

+-----------------------------------------------+
| #wrapper +---------------+|
| | #rechts\_oben ||
|+-------------------+ | ||
|| #links | +---------------+|
|| | +-----------------+|
|| | | #rechts\_unten ||
|+-------------------+ +-----------------+|
+-----------------------------------------------+

Alle innerren DIVs sind von wechselnder Höhe. #rechts_oben und #rechts_unten sollen immer bündig übereinander stehen und bündig mit der rechten #wrapper-Kante zusammenfallen, #links und #rechts_unten sollen immer unten mit der unteren #wrapper-Kante zusammenfallen. Der Abstand zwischen #links und #rechts ist flexibel.

Wie kann ich das hinbekommen?

Um Eure Hilfe zu vereinfachen hier schon mal das Grundgerüst:

#wrapper {
    position:
}
#links {
    float:
    position:
}
#rechts_oben {
    float:
    position:
}
#rechts_unten {
    float:
    position:
}

Vielen Dank :smile:
JayKay

#2

Meine Vorschläge:open_mouth:ption A: Du positionierst die DIV innerhalb einer Tabelle.Option B: Du erstellst einen eigenen DIV in dem du #rechts_oben und #rechts_unten positionierst.

#3

Hallo Jens Keller,

Der Abstand zwischen #links und #rechts ist flexibel.

Also ist es eine relative Positionierung.

Um Eure Hilfe zu vereinfachen hier schon mal das Grundgerüst:

#wrapper {
    position:
}
#links {
    float:
    position:
}
#rechts_oben {
    float:
    position:
}
#rechts_unten {
    float:
    position:
}

Danke, denn das ist das A und O für uns, damit wir Ihnen weiterhelfen können.
Ich vermute, Sie möchten den Code vervollständigt haben, was ich jetzt machen möchte:

#wrapper {
position: relative;
}
#links {
float: left;
position: relative;
margin-top: 40px; // Außenabstand von oben
margin-left: 40px; // Außenabstand von links
}
#rechts_oben {
float: right;
position: relative;
margin-top: 40px; // Außenabstand von oben
margin-right: 40px; // Außenabstand von rechts
}
#rechts_unten {
float: right;
position: relative;
margin-top: 40px; // Außenabstand von oben
margin-right: 40px; // Außenabstand von rechts
}

Sollte meinen Vorschlag nicht klappen, dann versuchen Sie es bei #links , #rechts_oben und #rechts_unten mit _ position:absolute; _ und statt mit margin-left: 40px; lieber mit _ left:40px; _ sowie statt margin-top:40px; lieber mit _ top: 40px; _ verwenden.

Ich hoffe, dass ich Ihnen damit helfen konnte.
Für weitere Rückfragen stehe ich Ihnen gerne zur Verfügung.

Sternchen? Gerne doch.

Mit freundlichen Grüßen
t.koelpin