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.
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.
Thanks for this useful and well written article!
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.
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
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.
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??
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.
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.
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
No problem Laura. It looks pretty good!
Glad to help.
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.
Thanks! I searched and searched on the web for the correct info, and yours was the first one that actually worked!!
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!
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!
Thank you so much, i was looking for this info for long time. Thanks Thanks and Thanks again.
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
Hey, thanks for the tip, I searched all over for this. Thanks a lot, really liked this post. Good Job.
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
Thanks for the code, worked like a charm! It is very useful to wrap content around google ads.
Great tip! I used it on my website in my articles section. It works like a charm.
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
OK, got it figured out…
You ahve to call out each margin independantly… still no spaces…
Sorry it didn’t post right…
div style=”display:block;float:right;margin-left:30px;margin-right:0px;margin-top:15px;margin-bottom:10px;”
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.
or float:left as I like to use it
I thought it´s forbidden to change stuffs at adsense codes?
Who is changing the Adsense code here?
Is just a div to hold the Adsense code…
Very nice blog! Just bookmarked!
Thanks for this info. I searched a long time…
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. : )
Thanks a million! The code worked great and I am able to display Adsense neatly beside my text. thanks again. – Chris
you are the best, i can;t tell you how happy i am that i found you site. I have been trying to add image and picture to page by wrapping the text round the image,i have been searching for more 2months for the simplest and easiest ones,not that i have not been seeing some, but they were just not explained properly, i know not about html. Now i can do same for my chitika ads. Your site is just perfect.
Thank you so much.
excellent info, thanks
thanks for giving the good information…
Thanks for this great info. its helping me a lot..
i tried to wrap ads, but the text still appear in the bottom!
Thanks for the great tip. This worked perfectly as it should.
But I did have to shorten the length between the margin: and the first 5px
Hey, excellent and informative post. I wasn’t sure if this would work with my blogger blog but it worked first time and it was so simple. Keep up the good work my friend.
Great ideas – I love how you can use it for all kinds of text or images including adsense code
Thanks a lot! This advise worked perfectly for me!
hi Is that just for one post? How do you get it automated on each previous post you’ve done, and for future posts automatically?
Thanks
Baker