CSS: Artikel „ausblocken” bei Bild mit wenig Text

[Jens Pielawa]

Hallo an alle,

ich habe eine CSS-Frage, bei der ich keine direkte Lösung finde. Unter http://www.neu.pro-d-tunnel.de/steintor-bebauung.htm ist das Beispiel, wo mehrere Artikel jeweils mit einem Bild und deren Unterschriften vorhanden sind. Die dazugehörigen Texte aber sind nicht immer so reichhaltig und fallen deswegen kurz aus. Nun werden aber alle Bilder und deren Texte offenbar durch einen Float immer weiter nach rechts versetzt.
Wie erreicht man es, dass man die Artikel quasi ausblockt und die Bilder brav untereinander stehen, auch wenn die Texte dann jeweils Lücken darstellen? (Es liegt mir auf der Zunge, aber z. B. mit verschiedenen block-Anweisungen kriege ich es nicht direkt hin.

[Spooky]

Mit Artikel meinst du wohl die einzelnen ce_text Elemente?

Was du brauchst ist ein clearing, in welcher Form auch immer. Ganz allgemein könntest du das hier verwenden:

.block:after {
    content:"";
    clear:both;
    display:block;
}

Ich glaube das wird auch im Contao CSS Framework eingesetzt.

[mlweb]

Wenn ich es richtig sehe, setzt Contao 4 derzeit in der layout.css auf

.block {
    overflow:hidden;
}

[tab]

Ja, wie auch schon in Contao 3. Aber auch das sollte funktionieren.

[mlweb]

Aber auch das sollte funktionieren.

Klar funktioniert prinzipiell beides. Manchmal muss man jedoch auf die "Nebenwirkungen" achten, weil .block ja an vielen Elementen hängt. Gerade

.block {
overflow: hidden
}

aus dem Framework ist da prädestiniert.

[Jens Pielawa]

.block {
    overflow:hidden;
}

zersägte mir das komplette Navigationsmenü (Kauftemplate), deswegen stand ich ja etwas auf dem Schlauch. Genau das habe ich übrigens bei einer alten Contao-Seite auch drin, aber hier hat's nicht funktioniert.
Spookys Tipp hilft aber besser, danke dafür!

[Spooky]

Ja, overflow:hidden auf .block würde ich nicht empfehlen

[tab]

Hmm, hat mit Standard Contao-Layouts immer prima geklappt. Ich glaube ich habe keine Website wo das nicht drinsteht .