Home/ Questions/Q 8047853
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-05T06:14:13+00:00

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

  • 0

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:

Example

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0