Wrapping text around an image may seem simple at first glance.
Align the image left or right and apply the text.
But to get the image exactly where you want it is not as simple as it seems.
You want the image to end up at the bottom right with the text flowing around it.
That is fairly simple unless the text is changed often.
There is also the problem with the way different browsers display the text and the image.
Lets take an example:
We will use the code you posted.
The only thing is, you didn't specify the width of the outer div.
So I will give it a width of 300px just for this example.
Now if we specify the image div first and then the text,
the text will wrap itself around the div with the div being at the top of the page, aligned either left or right (float:left or float:right).
Now this is important to understand, because we want the image div to be at the bottom right.
So you need to know how much text will be able to occupy the space to the left of the image div without wrapping itself around the bottom of the image.
This text goes after the image div and the rest of the text goes before the image div.