Position Ad Units in Posts

March 6, 2008

Creative Commons License Photo 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
Copy your AdSense script.
Close the div with

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:

Your Google AdSense Script

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

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:

Your Google Script

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

E.g.;

Your Google Script

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

Enjoy!