Div mindestens genauso hoch wie Bild daneben

[dave]

Hi,

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)?

Na die weiße Fläche wird schon irgendein Element o.ä. sein müssen.

Also in dieser Art:

<article> <!-- mit Hintergrundbild und 20px padding-->  
	<div> <!-- mit weiß-transparentem Hintergrund und 20px padding-->  
		<img .../> <!-- mit negativem margin, damits direkt am Rand des umschließenden div-Elements ist (quasi gegen die 20px padding) -->  
		<h1>...</h1>  
		<p>...</p>  
	</div>  
</article>

Das finde ich jetzt von allen Ideen in meinem Kopf am besten, wobei mich auch hier das div etwas stört.

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: [Clearing per Pseudoelement]
Hat das bei mir keinerlei Auswirkung. Ist das nicht das in der Kombinationslösung vorgeschlagene?

Ist es das direkt im ersten Satz des verlinkten Absatzes beschriebene?

"Um das Überlappen der float-Box zu verhindern, bekommt der Container die Eigenschaft overflow mit einem anderen Wert als visible."

article hat bei mir overflow:hidden.

Oder meinst du noch was anderes?

~dave