Position Ad Units in Posts


Creative Commons LicensePhoto credit: AMagill

Ever since I started placing AdSense units in my posts I have been getting emails from readers asking me how I position my ads in the right hand corner of my posts. So I decided to share this information in a post rather than explaining it over and over in individual emails.

To position the ads in my post I use CSS float property. I’ll show you how you can display the ads on either left or right side within in your post.

Steps to ‘float’ ad unit to right side in your post:

  • In your post type
    <div style=”margin: 0 0 10px 10px; display: block; float: right”>
  • Copy your AdSense script.
  • Close the div with </div>

The float:right property will move the ad to the right side. To push the content away from the left and bottom sides of the ad I added 10px for bottom and left margins.
Example:
<div style=”margin: 0 0 10px 10px; display: block; float: right”>
Your Google AdSense Script
</div>

Place ads on the left side:

If you want to float your ad unit to the left side of your post change CSS style to this

<div style=”margin: 0 10px 10px 0; display: block; float: left” >

Again we are using margins to add white space . We still have bottom maring of 10px but now instead of left margin we are using right margin of 10px to push the content away from the ad.

Example:
<div style=”margin: 0 10px 0 0; display: block; float: left” >
Your Google Script
</div>
This approach of embedding CSS styles within posts has one serious drawback.


If in future you want to change the ad’s position you will have to edit all the posts. Not a pretty thing to do.
To avoid this scenario add following code to your style.css file (for right hand ads).

.ad{
display:block;
float:right;
margin:0 0 10px 10px;
}

or if you want ads on left side add this

.ad{
display:block;
float:left;
margin:0 10px 0 10px;
}

And in your post enclose your ad script within
<div class=”ad”> </div>

E.g.;

<div class=”ad”>
Your Google Script
</div>

Now if you want to change the position of your ads, just change the style.css file.

Enjoy!

Comments 7

Leave a Reply

Your email address will not be published. Required fields are marked *