dave: Div mindestens genauso hoch wie Bild daneben

Beitrag lesen

Hi,

Ohnehin stört mich das nutzlose div-Element, aber ohne bekomm' ich 's überhaupt nicht hin. Wenn also da jemand weiß wie ich schaffen kann dass es wie gewünscht aussieht nehme ich gerne Hinweise an :-)

Lass das DIV-Element weg, und formatiere ARTICLE stattdessen.

Und wie kann ich das article-Element formatieren so dass es einen 3px breiten weißen Rahmen hat, dann 20px padding (wo man nur die Hintergrundgrafik sieht) und in der mitte eine transparente weiße Fläche die wiederum ein padding von 20px hat (und über der Hintergrundgrafik liegt)?

Das einzige was ich seh ist article>* das transparente weiß als Hintergrundfarbe zu geben und ein padding:0 20px, dann noch first-child und last-child für padding-top und padding-bottom.
Dann geht aber die Linie der Überschrift über die gesamte Breite, und ich weiß nicht wie ich das verhindern kann.

Das div-Element neben dem Bild ist immer nur so hoch wie sein Inhalt. Ich möchte aber, dass es mindestens so hoch ist, wie das Bild daneben.

SELFHTML Weblog: Grundlagen für Spaltenlayout mit CSS

Dich interessiert für das konkrete Problem besonders der Abschnitt „Einschließen von float-Boxen“. Bitte arbeite aber den kompletten Artikel aufmerksam durch, er vermittelt wichtige Grundlagenkenntnisse.

Wenn ich folgendes hinzufüge:

article > div::after {  
	content:"clear";  
	clear:both;  
	display:block;  
	height:0;  
}

Hat das bei mir keinerlei Auswirkung. Ist das nicht das in der Kombinationslösung vorgeschlagene?
Außerdem müsste ich damit dass im IE7 funktioniert dann zusätzlich ein div einfügen?

Und dann gibts leider auch den Fall, dass das Bild anstelle des float:left ein float:right hat.
Dafür konnte ich keine Lösung finden, die bei mir ohne zusätzlich div-Elemente funktioniert.

Ich bin leider auch nach dem (teils mehrfachen) Lesen des Artikel mit meinem Problem noch überfordert.

~dave