img in div

[geronimo69]

Hallo zusammen

Warum umschliesst der Border nicht das gesamte img?

<div style='border:1px solid black;'>	<img src='http://d18krzy3dutnlo.cloudfront.net/mosaic_items/photos/375-1364240495/square.jpg' style='float:left;'>		<div>Langer Text<br /><br />Langer Text</div></div>

Gruss Geronimo

 

[threadi]

Weil Du neben dem img auch noch Text innerhalb des Elementes hast, welches den Text umfasst? Sorry, aber mit der Fragestellung und unvollständigem Quellcode kann man nur erahnen was Du meinst.

 

[geronimo69]

Ich habe ein Div. Darin ist links ein Bild und rechts Text. Ich verstehe nicht, warum der Border nur bis an den unteren Rand des Textes geht und nicht bis an den unteren Rand des Bildes. Wie würde man das machen. Man kann das Beispiel oben lokal testen.

 

[threadi]

Ah, jetzt weiß ich was Du meinst. Das wird dadurch verursacht, dass Du das Bild floatest. Dadurch hat das umgebende Element "keine Höhe mehr", da es nicht weiß wie hoch die innenliegenden Elemente sind.

Du hast hier 3 Möglichkeiten zur Lösung:
a) Gib dem umgebenden <div> auch noch die Eigenschaft

overflow: hidden;

b) Ergänze im CSS-Code für das umgebende div eine after-Pseudoelement mit einem clearing:

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

c) Ergänze vor dem Ende des umgebenden Elements ein neues Element, welches das floaten beendet.

Ich würde zu a) raten.

 

[geronimo69]

Hey super! Besten Dank. Genau das was ich gesucht habe. Jetzt habe ich einen Fall abgedeckt. Und jetzt noch der zweite Fall, den ich nicht verstehe:

Beispiel -> lokal zum testen:

<div style='border:1px solid black;overflow: hidden;'>	<img src='http://d18krzy3dutnlo.cloudfront.net/mosaic_items/photos/375-1364240495/square.jpg' style='float:left;'>		<div>Langer Text<br /><br />Langer Text<br />Langer Text<br />Langer Text<br />Langer Text<br />Langer Text<br />Langer Text<br />Langer Text<br />Langer Text<br />Langer Text<br />Langer Text<br />Langer Text<br />Langer Text<br />Langer Text</div></div>

Ich möchte nun, dass der Text, welcher unter dem Bild ist - der soll in einer Kolone rechts vom Bild sein, also ich will keinen Text direkt unter dem Bild?!

 

[threadi]

Dann solltest Du

a) das div in dem der Text steht durch ein <p> ersetzen, da ein <div> hier semantisch falsch ist.
b) dieses <p> dann floaten.