Not sure if this is the best way to achieve it, but you could try this:
Code:
<div style="width:600px;">
<div style="width:400px;height:200px;border:solid yellow; position: relative;float:right; z-index: 1;"></div>
blah<br />
blah<br />
blah<br />
blah<br />
<!-- the following <div> sticks to the 'blah' text and overflows the floated div -->
<div style="width:400px;height:100px;border:solid green"></div>
<!-- but the following img stops at the base of the floated div and does not overlap it-->
<img src="phpwp.jpg" style="width:400px;height:100px;border:solid blue;position: relative; top: -20px" />
</div>
Works for me, I think I have done it how you wanted..
If you want your test image to be sat 'on top' of the yellow bordered div instead, you can delete the
position: relative and
z-index: 1 from the yellow bordered div.
Hope it helps.
Best of luck.
Regards,
LC.