How can I get the ads to align left or right with text wrap

Hi Mark,
You can wrap the ad code in a <div> and apply CSS styles to the div to align it as needed.

For example, if you want to align the ad to the left and have text wrap around it you can use something like this:

<div style="float: left;">
<!-- Ad code goes here -->
</div>

If you need to add a margin to the ad so the text doesn’t touch right up to it, you can do something like this

<div style="float: left; margin-top: 10px; margin: 10px;">
<!-- Ad code goes here -->
</div>

Change the left to right depending on which direction you want the ad to go.

My DIV codes have stopped working as I have the following line of code on most pages and posts:

<div style=”display: block; float: left; margin: 10px 10px 10px 10px;”><!–[AdSense-B] –></div>

Its STOPPED working in all browsers. Its suppose to align the adsense box to the right or left of the post/page text.

I don’t know when it happened or why as I have not looked at my site closely for some weeks while traveling.

How do I fix this WITHOUT having to recode hundreds of pages and posts???

Why would it just stop working? I DON’T want to recode everything only to have that stop working for no apparent reason in the future…

Could you explain what has stopped working? Are the ads not displaying at all? Is the ad not aligning correctly? Could you provide a link to your site where it isn’t working correctly, and explain what part isn’t correct?

The code you provided, is that a direct copy from one of your posts? If so, the <!-- and --> are probably causing the ad to stop displaying.

My original suggestion, which should still work, was to put the <div> with the styles around the ad code on the plugin’s setting screen. That way you could still just use [AdSense-A] (or B or C) in your post without having to worry about formats.

For example, in Settings > AdSense In-Post, you could put your ad code in one of the boxes like this:

<div style="float: left; margin:10px;">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:inline-block;width:336px;height:280px"
     data-ad-client="ca-pub-1234567812345678"
     data-ad-slot="1234567890"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>

In your blog posts you would just use the shortcode without the need for adding a <div> around it each time. If you ever need to edit the <div> style, you would only have to make the change once in the plugin’s settings.

You might also want to pay attention to any styles provided by the ad itself. See in the example above the style line in the ad code includes display:inline-block;. In your example it looks like you are trying to use display:block;. There may be a conflict with the styles used there as well.

Thank you! Putting the Div tags in your plug-in like this:

<div style="float: left; margin:10px;">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 336 x 280 Large Rectangle -->
<ins class="adsbygoogle"
     style="display:inline-block;width:336px;height:280px"
     data-ad-client="XXXXXXXXXXXXXXXXXXXXXXXXXX"
     data-ad-slot="1692205348"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>

Does get the ad to display correctly if I remove my now bad code and just put [Adsense-C] in the post or page.

Also, it looks like removing the <!– and –> gets the ad to display and display correctly BUT I will need to go through every post/page to remove that.

What do you mean by “display:inline-block;. In your example it looks like you are trying to use display:block;”??? I probably should fix that as well if its a problem.

I am not sure where I got my line of code as usually I google what I want to do to find appropriate code since I am not a programmer! I hope I don’t have other lines of code go bad….

The <!-- and --> code is the start and end of an HTML comment – anything in between those will not display to the visitor, but will show up in the code. It’s commonly used to insert some reminders such as the 336×280 Large Rectangle in your ad code.

As for the display:inline-block, I wasn’t sure what wasn’t displaying correctly for you – whether the ad wasn’t aligning correctly, or at all. Since the ad code specifies a different display, I thought I’d point that out, but it doesn’t seem like that was the problem anyway, so it probably doesn’t matter.

Glad you have it working now.

The whole ad suddenly wasn’t there wheras it was before.

On the theme I am using, I am having a slight problem in some places with some graphic adsense ads not being aligned properly or rather the right edge appears slightly chopped.

It could be the display:inline-block code in the sidebar widget but I probably need to run that issue by the theme designer as it could also be the theme’s columns not being aligned wide enough for those block ads.