Martin Hölter: float

Beitrag lesen

Hallo Forum!

Besteht die Möglichkeit, per CSS folgendes zu lösen?

Ich habe 3 Blockelemente, die nebeneinander floaten und eine unterschiedliche Höhe haben. Wenn die Elmente nebeneinander auf den Bildschirm passen, sollen alle einen gerade vertikalen Abschluss haben, also ca. so:

--------------------------------------
|     |                     |        |
|     |                     |        |
|  1  |                     |        |
|     |                     |   3    |
|-----|                     |        |
      |         2           |        |
      |                     |        |
      |                     |        |
      |                     |--------|
      |                     |
      |                     |
      |---------------------|

Das kriegt man ja mit margins problemlos hin, allerdings stören diese, wenn die Bildschirmbreite nicht ausreicht.Bei kleineren Viewports sollte das ganze am besten so aussehen:

-------
|     |
|     |
|  1  |
|     |
|-----|---------------|
|                     |
|                     |
|                     |
|                     |
|                     |
|         2           |
|                     |
|                     |
|                     |
|                     |

3
--------

Also ohne dass die Abstände wirken. Ich hoffe es ist klar, was ich meine. Ansonsten einfach nochmal fragen.

Wie könnte ich das hinkriegen? Also ohne dass bei ausreichend großem Bildschirm der Inhalt von Container 2 unter dem von 1 erscheint, bei kleineren Bildschirmen sich allerdings der komplette Container drunterschiebt?

Gruß aus Iserlohn

Martin