CSS - DIV Boxen übereinander

[Shauku]

Ich versuch schon eine weile, dynamische DIV Boxen übereinander zu schieben, aber es will einfach nicht funktionieren.
Folgendes Szenario:

Ich habe eine Div Box (float: left;) und eine Div Box (float: right;) mit festen Pixelgrössen (z.B. width: 200px; height: 200px;). Nun will ich, wenn man das Browserfenster verkleinert, dass sich die rechte Div Box unter die linke Div Box schiebt (mit "über" meine ich die Z- Achse).

Bei mir springt die rechte Box immer eine Zeile tiefer (also die Y- Achse).

Hier mal ein Testcode:

Code: Alles auswählen

<div style="width: 200px; height: 200px; background-color: #999999; float: left; z-index: 1;">A</div>
<div style="width: 200px; height: 200px; background-color: #C6C6C6; float: right; z-index: 2;">B</div>

Ich denke, ich seh mal wieder den Wald vor lauter Bäumen nicht. Hat jemand nen Tip?

[gn#36]

Ich glaube, dafür ist das "float" nicht wirklich geeignet, denn das ist ja gerade dazu da dynamische Platzierung der übrigen Elemente vorzunehmen. Ich denke was du erreichen willst kannst du nur mit statischer Positionierung erreichen, z.b. indem du das eine Element in einen festen Abstand vom rechten Rand setzt. Das andere kann dann machen was es will, irgendwann überlagern sich beide Elemente wenn nicht mehr genug platz da ist. Ein Beispiel wie sowas aussehen könnte kannst du hier sehen, wenn du den Browser mal kleiner machst wirst du feststellen dass die linken Bereiche irgendwann eine Minimalbreite erreichen und dann der rechte Rand beginnt sich hinter die Inhalte links zu schieben (zumindest wenn du einen halbwegs aktuellen Browser verwendest, welcher das Attribut min-width versteht).

[Shauku]

Danke. Ich werds mal mit einem absolute positionierten Element probieren.