Consider this HTML:

<div id="entry-content">
    <div id="my-300px-ad">AD CODE HERE</div>
    <p><img src="file.jpg" alt="file" /></p>
    <p>SOME TEXT</p>
    <p>SOME MORE TEXT</p>
</div>

Now, consider that the div#my-300px-ad is floating right. Would it be possible for me to have the image in the next paragraph show up before the ad so that the TEXT in its following paragraphs can wrap around the ad?

For example, like this:

Why so...?

The thing is, due to various reasons (including Google) I want to avoid placing an ad in BETWEEN the post's content.

CSS only

I am sure that something like this would be possible with some JavaScript code. But I am looking for a CSS-based solution only. (Cross-browser compatibility, = IE8)

Please note that ONLY the CSS of div#my-300px-ad can be changed. Nothing else should be touched as this is not a static HTML page, besides they are articles.

PS: It was hard to frame a one-line question for this. Please feel free to edit the question's title if it can be made more clear.