Give More Prominence To DIV or That Is After Floating DIV

Question

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.

Answer 1

This is not possible, as stated in these two questions:

Use CSS to reorder DIVs

CSS layout, use CSS to reorder DIVs

Without knowing the height of the element you want to skip, using javascript, or changing the html you cannot reorder elements with css in the way you describe.

However, as it appears you are making a WordPress theme, it shouldn't be too difficult to place the ad inside the post and after the image. If you do so, placing the ad inside an aside element should tip off Google that it is not part of the main post.

Mozilla Developer Network: In HTML4, every section is part of the document outline. But documents are often not that linear. A document can have special sections containing information that is not part of, though it is related to, the main flow, like an advertisement block or an explanation box. HTML5 introduces the <aside> element allowing such sections to not be part of the main outline.