Christian1983AD: CSS ... Vertikales Problem

Hallo....

habe gerade ein kleines Problem mit der DIV Formatierung...
Zum genaueren Verständnis habe ich die HTML online gestellt:

http://master2000.pytalhost.at/VERTICAL_DIV_PROBLEM/

(CSS-Datei hier der Einfachheit halber in HTML integriert)

Ich hätte gerne dass sich IMAGE_RIGHT vertikal über IMAGE und IMAGE_BROAD spannt.

Sollte im Endeffekt also so aussehen:

http://master2000.pytalhost.at/VERTICAL_DIV_PROBLEM/see_yourself.jpg

Bitte um Lösungen, die so einfach wie nur möglich zum Ziel führen...
Ich bin einer der Nachzügler, die sich von der leidigen <TABLE> Formatierung nun [endlich] auf CSS umstellen will, Formatierung des Layouts auf CSS-Basis ist ergo derzeit noch Neuland für mich.

Danke,
Liebe Grüße,
Christian.

  1. Grüße,

    1. dann solltest du ihm keine fixhöhe geben
    2. wrap müsste tatsächlich die höhe der zwei reihen haben (fix) da float elemente den nciht aufspannen würden
      3)den cleardiv müsstest du entfernen (übrigens - da gibt es wunderschäne lösung mit :after pseudoklasse
      MFG
      bleicher
    --
    __________________________-

    FirefoxMyth
    1. ah ja - "faux columns"
      MFG
      bleicher

      --
      __________________________-

      FirefoxMyth
  2. Der unsichtbare Wrapper (der alles umschliesst) bekommt eine fixe höhe z.B. 350px.
    Das grüne Image Dings bleibt float: right; wird aber vor allen anderen Elemente gesetzt. Zudem bekommt es height: 100%; (also so groß wie wrapper).
    Die roten Dinger bleben bestehen bekommen aber height: 50%; (oder 40% + margin-bottom: 10%)
    Die blauen Dinger bekommen ebenfalls height: 50%; (oder 40% + margin-top: 10%).
    Das class='clear' enthält ein clear: both; das änderst du in clear: left;

    et viola "fast" deine Grafik

    Gruß
    Floating
    T-Rex

    1. @ T-Rex:

      Danke, funktioniert hervorragend!

      Vielen Dank auch an Bleicher, soweit bin ich dann aber gar nicht gekommen :)

      :THUMBSUP: