Dieter Raber: clear flaot zerreisst Layout

Hallo alle,

Ich habe ein CSS-Layout, das etwa so ausieht:

Im Prinzip beruht es auf dem Code fuer Dreispalten-Layouts aus Selfhtml. Rot ist ein Bild in einem div mit float:left, blau eine Ueberschrift, gelb ein Text. Es soll mehrere solche Bloecke geben, aehnlich, wie man das zB. von der Speigelwebseite kennt.
Solange Text und Ueberschrift mindestens genauso hoch sind wie das Bild, funktioniert das auch problemlos, wenn der Text aber sehr kurz, schliesst die naechste Ueberschrift unmittelbar an den vorhergehenden Text an. Wenn ich die Ueberschrift mit clear:left formatiere, funktioniert die mittlere Spalte natuerlich so, wie sie soll, wuerfelt aber das Gesatlayout durcheinander.

Wie loese ich dieses Dilemma?

Gruß,

Dieter

  1. Hi,

    Solange Text und Ueberschrift mindestens genauso hoch sind wie das Bild, funktioniert das auch problemlos, wenn der Text aber sehr kurz, schliesst die naechste Ueberschrift unmittelbar an den vorhergehenden Text an.

    Eine Möglichkeit wäre, Überschrift und Text in ein div mit passender min-height zu setzen (für den IE könnte height helfen). Eine andere, den linken Container absolut zu positionieren - dann steht Dir clear:left wieder zur freien Verfügung.

    freundliche Grüße
    Ingo

  2. Ich weiß nicht, ob ich Dich richtig verstanden habe, aber vielleicht nimmst Du einfach float:right statt left für die Bereiche rechts?

  3. Hallo Jan und Ingo,

    ich wollte nur mal danke sagen fuer die Ratschlaege. Am Montag werd ich das mal testen.

    Gruß,

    Dieter