Not sure if this is the best way to achieve it, but you could try this:
<div style="width:400px;height:200px;border:solid yellow; position: relative;float:right; z-index: 1;"></div>
<!-- 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" />
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
from the yellow bordered div.
Hope it helps.
Best of luck.