How to easily wrap text around Google Adsense or Chitika ads
09-05-07 UPDATE: I just wrote a new post about inserting adsense between multiple paragraphs in a wordpress blog post. Check it out for the best way to do this without a plugin!
If you’re like me and rather new to the html coding world you proabably are looking for a dumbed down way to do things. Well I have begun posting lots of tips on using wordpress and netfirms and decided that I need to post about coding in general as well. One of the most useful things I have learned how to do is wrap text around Google Adsense ads when they are embedded in text. If you are using wordpress and would like to find out how to wrap text just follow this link. If you are looking to just wrap text around ads using a normal html editor like notepad, Dreamweaver, or FrontPage then keep reading.
Also the great thing about this trick is that it works for Chitika ads as well. If you aren’t using Chitika ads you should, they are very similar to google adsense and another way to generate revenue for your site. They pay monthly once your account goes over $50.
The process described is a really easy 2 step process with one extra tag you need to add. This is the quickest and easiest way I found to wrap text around google adsense using the least amount of html coding. Much easier than inserting a table or anything like that.
How to wrap text around Google Adsense ads (also works for Chitika):
1. First off you need to get into your text editor you use for html coding. You can use the coding section of Dreamweaver or FrontPage, or use Notepad. Then you have to find where in your content you want the text to wrap around the ads. Anywhere will work for your first try, you can then copy and place the text where you please.
2. Once you found the spot you like you need to add the following div tag around your adsense or chitika code.
<div style=”display:block;float:right;margin: 5px 5px 5px 5px;”>
all the google adsense code (or chitika)
</div>
That’s it!
Explanation of the div tag
The float:right attribute can be changed to float:left or float:center as well and it will position the ads in those positions while allowing the text to wrap around the ads that directly preceeds and follows it. I also add the margin code to add a margin of white space around the text wrap on the top, bottom, left, and right. You can add or remove space as you wish. The display:block element basically just describes whether you want to break the line where you are inserting the ad or let the browser find where to break the line and wrap the preceeding text. If you want the browser to do it just choose block:inline. I have better luck with block:float but it can sometimes make the text look choppy. Play around with these to see what you like.
There you have it, you can now insert this same coding with different add scripts all over your content and have the text wrap around the ads. Remember that this works with both Google Adsense and with Chitika based ads. Good Luck!
If you are using wordpress check here to get text to wrap around adsense inside posts. I also have a similar article about getting it to wrap around chitika ads which just requires a tweek.
Comments
Comment from Bourne Chase
Time: February 4, 2006, 9:59 pm
I tried doing what you said to wrap text around google ads. I am using dreamweaver. It works in mozilla firefox, but in dreamweaver it says the code has been marked invalid because one of the attributes is duplicated?? Also, when I preview that page in IE, it does not show anything.
Comment from Simon
Time: January 11, 2007, 1:39 pm
Thanks for this useful and well written article!
Comment from Scott M. Stolz
Time: January 26, 2007, 3:01 pm
Thank you for this article. It is exactly what I need. And it even shows up in the number 2 spot when I searched for it on Google making it easy to find. Good job.
The margins didn’t work right for me until I changed the code to be:
all the google adsense code (or chitika)
The space between “margin:” and the first variable “5px” was throwing it off.
Comment from Erik
Time: January 26, 2007, 3:05 pm
thanks for the kind words scott, i looked through a couple articles out there but they just didn’t do anything for me.
Once I figured it out, i thought I would share.
Aloha
Comment from Scott M. Stolz
Time: January 27, 2007, 7:35 pm
The code in my comment above didn’t show up correctly, so I am posting it again.
[div style=”display:block;float:right;margin:5px 5px 5px 5px;”]
This is the code that worked for me.
Change “[" and "]” to angle brackets, of course.
Comment from Basketer
Time: April 7, 2007, 9:45 pm
Hi. I faced a weird problem. When I applied this the ads show just right. somehow, all my post text is gone and it shows just the ads. Things I changed :
*I added the parsed code instead of normal code.
*I am using blogger.
Please tell me what should I do??
Comment from Erik
Time: April 8, 2007, 10:12 am
Basketer,
Not sure if I understand what “parsed code” means.
Make sure you add style=”float:right” (or left) and that should do it.
Not sure about blogger though. Provide more information and I’ll definitely help ya out. 
Comment from iqbal
Time: May 7, 2007, 9:21 pm
hi
nice site u have. Can you help me how to place google adsense code like the above one but along my text.like say i am writing a paragraph and also want to attach GADSense with it. I tried but its not working. I have HTML site and Iwork in DreamWeaver.What tags should be used.
thanks.
Comment from Laura
Time: May 13, 2007, 10:57 am
What a great tip, I’ve been wondering how to do that. I’ve now put one of those big blocks on my front page using your tip, shall see how the bock does with the wrapped text.
Thanks Laura
Comment from DPeach
Time: June 13, 2007, 5:33 pm
Thanks for the tips. This was helpful on my site. I am running AdSense on some static pages of my WP blog. Just dumping the div style= segment into my post did the trick.
Comment from cooliojones
Time: July 9, 2007, 3:06 am
Thanks! I searched and searched on the web for the correct info, and yours was the first one that actually worked!!
Pingback from worldofangel.com » How to wrap text in blog posts around Adsense ads
Time: July 26, 2007, 6:06 am
[...] was a useful post on Board Shorts about how to wrap the text your blog posts around adsense. It’s actually really simple. All you [...]
Pingback from AdSense Tipp - Anzeigen mit Text umfliessen | SEO & Co.
Time: September 17, 2007, 3:05 am
[...] um hier zu einem gescheiten Ergebnis zu kommen. Fündig bin ich dann irgendwann bei Erik Vossman unter den Keywords “How To Wrap Text Around Google AdSense” geworden. < div [...]
Pingback from How to wrap text around an adsense block in a Wordpress post | SearchMarked.com
Time: December 17, 2007, 6:58 am
[...] in the beginning of the posts. After some Googling, I found an article to get me started over at ErikVossman.com. The summary is listed [...]
Comment from maline
Time: January 12, 2008, 2:11 pm
thanks for this tip! i have tried others’ on how to wrap adsense on my post but this is the only one that worked! seems others didn’t use the block word. I tried to use adsense deluxe plugin but it doesn’t work on my blog, always give me error.
thanks heaps!
Comment from Connie
Time: February 5, 2008, 5:36 am
Thank you so much Erik for the html code. I have been looking for html code that will wrap text around my affiliate products. All that I have been able to find is code that will wrap my text around google ads, I tried them.
I came across your website, the code was different so I gave it a try. And whoala!! it worked, I am so grateful, finally. Thank You, thank you, thank you!
Comment from Alejandro Seo | Webdesigner
Time: March 12, 2008, 7:53 am
Thank you so much, i was looking for this info for long time. Thanks Thanks and Thanks again.
Comment from HiroImafujiDotCom
Time: March 19, 2008, 11:30 am
Thank you for the tips. It was very helpful. My blog is in Japanese but I will introduce your site soonish. It was great to find your site. Thanks again.
Cheers,
Hiro
Comment from Rob
Time: March 19, 2008, 6:31 pm
Hey, thanks for the tip, I searched all over for this. Thanks a lot, really liked this post. Good Job.
Comment from Exploring The Internet
Time: March 24, 2008, 1:31 pm
I love your site. I am sure my visitors are going to love it too. So I refer your post as one of the resourceful sites on my blog. Hope that is OK with you.
Lanna
Comment from Joe
Time: June 27, 2008, 6:08 am
Thanks for the code, worked like a charm! It is very useful to wrap content around google ads.
Comment from Mike
Time: July 7, 2008, 2:39 am
Great tip! I used it on my website in my articles section. It works like a charm.
Comment from works tahnks but..
Time: August 21, 2008, 9:51 am
It works great on the site, removing the extra space for the margin callout helps.. but only the first margin callout works… it changes it for every side… is there a way to get all of the callouts working so you can control margin width on different sides?
Thanks
Comment from works thanks but..
Time: August 21, 2008, 9:53 am
OK, got it figured out…
You ahve to call out each margin independantly… still no spaces…
Comment from works thanks but..
Time: August 21, 2008, 9:54 am
Sorry it didn’t post right…
div style=”display:block;float:right;margin-left:30px;margin-right:0px;margin-top:15px;margin-bottom:10px;”
Comment from kiran
Time: August 21, 2008, 11:40 pm
HI,
I want to wrap text within the div, I have tried your code but it doesn’t work. I have find another solution
It works fine in IE but fails to work in Mozilla explorer.Can you please give the proper solution that works every where.
Comment from Reiki
Time: September 21, 2008, 8:48 pm
or float:left as I like to use it
Comment from Herbalife
Time: September 22, 2008, 9:04 am
I thought it´s forbidden to change stuffs at adsense codes?
Comment from Reiki
Time: September 29, 2008, 11:09 am
Who is changing the Adsense code here?
Is just a div to hold the Adsense code…
Comment from LR Kosmetik
Time: October 20, 2008, 10:58 pm
Very nice blog! Just bookmarked!
Comment from Samir Jajjawi
Time: October 21, 2008, 11:55 am
Thanks for this info. I searched a long time…
Comment from jeremy
Time: October 22, 2008, 7:16 pm
hey great work i have been looking for this for so long . If you want to see your work in action go to http://www.ahealthycolonnow.com thanks heaps for your article on How to easily wrap text around Google Adsense or Chitika ads. : )
Comment from Chris
Time: November 6, 2008, 4:17 pm
Thanks a million! The code worked great and I am able to display Adsense neatly beside my text. thanks again. - Chris
Comment from michael sommer
Time: April 30, 2009, 5:00 am
very nice blog, really great work,
thanks
Comment from Webdesign Stuttgart
Time: June 19, 2009, 2:09 am
Thanks for the nice article, really good to read!
Comment from Erneuerbare Energien
Time: July 5, 2009, 11:31 pm
Thanks for this good articel . Enjoyed the reading
Comment from abufaris
Time: July 25, 2009, 8:10 pm
Thanks for wrapping the solution. Now it’s time to practise.
Comment from Suchmaschinenoptimierung
Time: August 4, 2009, 10:08 am
It´s a great ressource for every webmaster and blogger.
Comment from Suchmaschinenoptimierung
Time: August 4, 2009, 10:08 am
Take a look at my blog
Comment from Scott “Movers” Clendaniel
Time: September 7, 2009, 12:53 pm
I had the same issue mentioned earlier about the ads simply not showing up at all. I will try the adjustment of removing the space before the first margin setting.
Comment from Shannon
Time: September 22, 2009, 7:52 am
OMG! You saved my sanity. I was pulling my hair out because after adding Quick Blogcast from GoDaddy to my website yesterday, I discovered it does not have a text wrapping option for photos. After 45 minutes on the with a pleasant CS rep, I was told it would involve intense code manipulation, and we left it at that. Though virtually HTML code illiterate, I refused to give up, and google led me here.
I inserted the photo, pulled up the HTML screen, did a little cut and paste with your div code in notepad, and my first blog no longer has a giant, gaping hole.
Great Job!!! Thank You!!!
Comment from tobi
Time: December 7, 2009, 6:30 am
That sounds nice!!!
Comment from Celine
Time: December 11, 2009, 7:38 am
Thank you thank you thank you!
Works like a charm!
Comment from IFRS
Time: December 15, 2009, 11:32 am
I am so happy that I found your site!
Comment from James
Time: December 19, 2009, 5:56 am
Thanks! You need to take smarttags off on that piece of code otherwise the margin isn’t going to work.
Comment from Waikiki Beach
Time: March 6, 2010, 6:01 pm
You’re a life saver… thanks!
Pingback from Flee the Cube»Blog Archive » Google AdSense is up and running
Time: January 11, 2006, 9:42 am
[...] Now for a few specifics on installing Google AdSense into Wordpress. Your first prerequisite is that you must have your own website, preferably something with a decent amount of content on it. Then, signing up for AdSense is a cinch, but you will have to wait a couple of days during the approval period - Google actually takes a quick look at your site to make sure everything is in order. The next step is to download and install the AdSense Deluxe Plugin from Acme Technologies. This is as simple as dropping the main file into your wp-plugins directory and then activating it in Wordpress admin panel. The plugin gives you more flexibility regarding where you put your ads. You can add them right to a post using an HTML comment, or more generally to a template file using PHP. All this is explained pretty well in their README file. Finally, you log into AdSense, create an ad block that matches your site look and feel, and copy the resulting HTML block into the AdSense Deluxe plugin. Now you’re ready to drop that ad block into any spot on your website using a simple comment or a line of code in your template. Erik has a good explanation of how you can get your content to wrap around Google AdSense using a div tag. • • • [...]