Rahmen bei einem ein Bild umfließenden Text

[Uranos]

Hallo!
Ich hoffe, hier kann man mir helfen.

Ich habe eine Menge Text und wollte am rechten Rand ein Bild einfügen, dass dann vom Text umflossen wird. Das klappt auch soweit.
Dann ist in dem Text aber ein Absatz, den ich besonders herausheben will, indem er eine andere Hintergrundfarbe und einen Rahmen bekommt. Das klappt soweit auch.
Jetzt das Problem: Obwohl der Textabsatz korrekterweise an dem Bild umgebrochen wird, endet aber der rechte Rahmen nicht vor dem Bild. Der Rahmen und der Hintergrund es Absatzes erstrecken sich hinter dem Bild weiter und enden erst am rechten Seitenrand.
Als Notlösung würde mir noch einfallen, dem Absatz mit margin-right einen festen Abstand vom rechten Seitenrand zu geben, der so breit ist wie das Bild. Nur: Wenn jemand einen kleineren Viewport hat oder eine größere Schriftgröße eingestellt hat, dann ist dieser Absatz gar nicht mehr neben dem Bild sondern darunter, und da soll er ja bis zu rechten Rand reichen.

Also: Was muss ich einstellen, dass auch bei Text, der ein Bild umfließt, der Rahmen gleich neben dem Text, und noch vor dem Bild ist?

Ausschnitt aus dem Code:

  
<div class="bild"><img src="bild.jpg" alt="Bild" /></div>  
<p>Hier steht einiges an Text...</p>  
<p class="achtung"><span>Achtung:</span> Was hier steht ist wahnsinnig wichtig...</p>  
<p>Noch mehr Text...</p>  

Aus dem Stylesheet:

  
div.bild {  
float:right;  
background-color: #228;  
border-style: solid;  
border-color: #000;  
border-width: 2px;  
padding: 5px;  
margin-left: 5px;  
margin-bottom: 5px;  
width: 300px;  
}  
p.achtung {  
background-color: #33a;  
border-style: solid;  
border-color: #000;  
border-width: 2px;  
padding: 5px;  
}  
p.achtung span {  
font-weight: bold;  
font-size: 1.2em;  
}  

[Beat]

Jetzt das Problem: Obwohl der Textabsatz korrekterweise an dem Bild umgebrochen wird, endet aber der rechte Rahmen nicht vor dem Bild. Der Rahmen und der Hintergrund es Absatzes erstrecken sich hinter dem Bild weiter und enden erst am rechten Seitenrand.

Richtig beobachtet. Das liegt darin, dass dieser Absatz noch keinen Block-formating Context hat.

Als Notlösung würde mir noch einfallen, dem Absatz mit margin-right einen festen Abstand vom rechten Seitenrand zu geben, der so breit ist wie das Bild. Nur: Wenn jemand einen kleineren Viewport hat oder eine größere Schriftgröße eingestellt hat, dann ist dieser Absatz gar nicht mehr neben dem Bild sondern darunter, und da soll er ja bis zu rechten Rand reichen.

Du kannst dem Absatz auch die Eigenschaft
   overflow:hidden;
oder
   overflow:auto; (achtung: ev. scrollbars im MSIE!)
geben. Dadurch erzeugst du den Blockformating Context.

mfg Beat