Float Ad in your content

When you put your ads close to your web site's content, your visitors are more likely to read them. The more people actually read your ads, the more clicks you will get.

I don't think you should go too far and put ads in visitor's faces and then put your content below the fold, but you can set up your ad to float in your content. This gives you the best of both worlds. Your content and ads are easy to find above the fold.

If you author your website using a plain HTML editor you can put your ad code wherever you like. But if you're using a blog or most other content management systems, you rely heavily on templates and your ad code is likely in the templates, not in any particular piece of content.

In this post I'll show you how you can embed your ad into the content area of your blog posts or web pages, even if you're using templates. It only takes a little bit of HTML and CSS.

Why do ads in content perform so well?

As I mentioned above, most of your visitors are coming to your site to view your content, not your ads. So putting your ads within the content of your site will get more visitors to view your site. A lot of times, articles and blog posts will have an image that relates to the text floating somewhere in the content. So floating an ad there doesn't seem out of place.

Since probably only a small portion of your site's visitors actually look at or click on ads, you're also not making the majority of your visitors jump through hoops to get to your site's content.

Floating Ads in the top of your content

This is fairly easy but I'll demonstrate it for completeness. All you need to do is put your ad in a <div> block and set the style properties of that block appropriately to float it and give it some padding around it. I added borders in the image for clarity but did not include them in the code as you'd likely not want to use them. The green border shows where the floating block is.

You'll want to add the following code in your template, just before your main site gets inserted.

1:<div style="float:right; padding: 0px 0px 8px 8px;"> 2: <div style="width: 300px; height: 250px;"> 3: PASTE YOUR AD CODE HERE 4: </div> 5:</div>

The first div block floats to the right and creates white space padding on the left and bottom of the block. You can change it to float:left; padding: 0px 8px 8px 0px; if you'd like it to float left.

Also notice the second div tag inside the floating tag. It doesn't float but it defines the width and height of the ad block so the float can be the right size. The reason I do it this way is because it is the simplest way I found to get padding and width/height to work correctly in Internet Explorer and FireFox without using strange looking CSS hacks.

You'd want to pull the style out into your CSS file to make it easier to change

Have the ad float a bit below the top of your content

This is a little trickier but still easy to implement. It still floats the ad within your content but it positions it a bit below your content so that your content also wraps around the top of your ad.

The reason for doing this is it still keeps your ad above the fold and inside your content, but it gets your visitor to start reading your page. If after the first couple of sentences they decide this isn't what they were looking for, there's an ad there that might interest them more. Play around with this for a week before you decide if it works better or worse for you.

If you were coding all your pages by hand, you could put your ad anywhere. But if you're using a template, This is a little more complicated. You don't want to manually put the ad in every page/post because if you have to change it at a later date, you have to go into every page/post.

But adding to the floating technique described above, we can push the ad down into the content a little bit by using another small floating div block as shown in the picture on the right. To make it easier to understand, I used a red border for it in the image.

This time, I'll separate the HTML and CSS so you can see how that would look.

Before the spot where the content gets inserted in your template, insert the following bit of HTML:

1:<div class="adFloatSpacer" /> 2:<div class="adFloatBlock"> 3: <div class="contentAdBlock"> 4: PASTE YOUR AD CODE HERE 5: </div> 6:</div>

In addition to the 2 div tags we previously had, there is a third that appears before it. This is what pushes the ad down into the content.

Instead of defining the styles within the div tags, we gave them class names and will define the style attributes within the <style> tags of the page or within a link stylesheet. The CSS is as follows:

1:.adBlock { width: 300px; height: 250px; } 2:.adFloatBlock { 3: float: right; 4: padding: 8px 0px 8px 8px; 5: clear: right; 6:} 7:.adFloatSpacer { 8: float: right; 9: height: 97px; 10: width: 1px; 11:}

In the div block that floats the ad, the two changes from before were adding the clear:right; line and adding padding to the top. Without the clear attribute, the ad would float right next to the spacer instead of under it.

Important note about padding: For some reason, the line just before the top of the ad doesn't always wrap properly and the text may appear underneath the ad. This happens in both IE and FireFox. You should check your site and increase the top padding for adFloatBlock so you have plenty of room. The value will be different depending on the font attributes you use for your content. So experiment until you get the right number. Having the text interfere with your ad could violate the terms of your advertising program. So don't ignore this. Especially if you're using AdSense.

Hope this was helpful. If you use this please come back and let me know if you noticed any difference in your ad performance. If you find a better way to deal with the top padding issue, please let me know.

AdSense Warning

Google is very particular when it comes to their AdSense policies and guidelines. You have to be very careful so that you don't place the ad so that your site visitors think the ad links are part of your content. So that it is clear to the users you may want to do some or all the following:

• Include a title of Advertisements or Sponsored Links above the ads.
• Make sure the entire ad block shows, including the portion that says Ads By Google
• Use a border around the ads.
• Use a complementary color as the background for the ads.

What works best for your site depends on the rest of the formatting of your content, so read the AdSense guidelines and use your best judgment.