Bilder ragt aus Box heraus

[Anne]

Hallo!

Auf einer News-Seite möchte ich pro Artikel eine Box angezeigt bekommen, die den Text und ein kleines Bild enthält.

Das wollte ich so lösen:

Ich habe zuerst eine Klasse .newsblock definiert, die den Text und das Bild enthalten soll:

.newsblock
{
 background-color: #242343;
}

Damit das Bild ganz links in der Box steht, habe ich es gefloatet:

img
{
    float: left;
}

Der Quellcode dazu sieht so aus:

<div class="newsblock">
    <img src="[...]" />
    <p>Bla bla bla</p>
</div>
<div class="clearblock">
</div>

(Die Definition von der clearblock-Klasse enthält einfach nur "clear: both;", damit auch mehrere Boxen untereinander angezeigt werden können.

Mein Problem ist nun, dass das Bild hin und wieder größer ist als der Newsblock. Das Bild ragt dann nach unten hin aus dem Block heraus, was natürlich nicht besonders schön aussieht.

Was mache falsch? Kann mir jemand helfen? Vielen Dank im Voraus!

[Ole]

Hi

Was mache falsch? Kann mir jemand helfen? Vielen Dank im Voraus!

Setze noch innerhalb deines newsblocks einen clearblock.

Grüße
Ole
(8-)>

[Anne]

Hi

Was mache falsch? Kann mir jemand helfen? Vielen Dank im Voraus!

Setze noch innerhalb deines newsblocks einen clearblock.

Grüße
Ole
(8-)>

Super!

Danke, das hat geklappt und funktioniert sogar, wenn ich den anderen Clearblock ganz rausnehme.

[Pierre]

Lies mal den hier:

http://aktuell.de.selfhtml.org/weblog/css-spaltenlayout#wunderwaffe-overflow

Hat mir bei solchen Problemen schon oft weitergeholfen und ich konnte je nach Code auch auf die clears danach verzichten. Würde eh, wenn nicht unbedingt nötig jeweils nur den float clearen, den du auch direkt gebrauchst hast, beim float:left also auch nur ein clear:left, denn wenn du vorher mal ein float:right brauchst, ist es möglich, dass es zu unerwünschten Ergebnissen kommt.

Nehme mal an, dass die Geschichte in IE funzt, aber in FF nicht. Wenn du dem .newsblock overforw: hidden; mitgibst sollte es tun.

Gruss
Pierre