<div style="overflow: hidden; text-align: left; width: 300px;">
<img style="float: left;" src="foobar.jpg" height="30" width="50">
long text with left floating box. long text with left floating box. long text with left floating box.
text eventually breaks below the floating.</div>

<div style="overflow: hidden; text-align: left; width: 300px;">
<img style="float: right;" src="foobar.jpg" height="30" width="50">
long text with right floating box. long text with right floating box. long text with right floating box.
text eventually breaks below the floating.</div>


<div style="overflow: hidden; text-align: left; width: 300px;">
<img style="float: left;" src="foobar.jpg" height="30" width="20">
<img style="float: right;" src="foobar.jpg" height="30" width="20">
long text with left and right floating box. long text with left and right floating box. long text with left and right floating box.
text eventually breaks below the floatings.</div>