January 24th, 2008 by Tom

Css Style Code Wrap Text Around Image or Ads

You may see the technique that wrap text around image or adsense ads in many websites, you may want to use this technique in your website or blog but have no idea how to do it.

Actually, this is just a basic in Css about floating but many people don’t know how to do it, I always got questions about how to do this thing so I decided to write this tutorial.

The secret of this technique is a float tag , float: left; , if you want you div box align left, float: right; , if you want your div box align right. see a sample code below or download sample files here. Note : you can change attribute name (.ads_left, .ads_right) to your own.

Example

Css Style Code Wrap Text Around Image or Ads

Save this code in your Css style file.

The Css style code


.ads_left {
float: left;
padding: 5px;
margin: 0;
}

.ads_right {
float: right;
padding: 5px;
margin: 0;
}

How to use it.

Insert this code into you content where you want your image or adsense ad to be displayed (you can view an example in my sample file, download here)

<div class="ads_left"> Your image or ad </div>
<div class="ads_right"> Your image or ad </div>

Filed under : Css

Related Posts

12 Responses to “Css Style Code Wrap Text Around Image or Ads”

  1. Thanks for the code, I got it too work. I was thinking I could add it to a particular post (in the code view, not the visual view) but WordPress would convert the to and it wouldn’t work correctly. I did get it too work by putting the in the Main Index Template in case anyone else is having similar issues. Or maybe it was just me, but I have it working now so thank you.

  2. Looks like my post removed the html for a DIV and Paragraph so the above paragraph my not make total sense. Basically I had to put the DIV in the MAIN INDEX TEMPLATE (or whatever file someone wants using the theme editor, not in the post inself).

  3. All this sounds fine, but the real question should be: how do you place an image in the center of a paragraph and have the text wrap around in on all 4 sides?
    Any ideas?

  4. Thanks for the tutorial. Ok, taking this further, is a way to :-
    - make 2 images ( each at left and right ) for the background of website. Eg, image A as background on the left, while image B as background on the right. Both images should load when visitors view the page.

    So how do I tweak the code ? Possible ?

    - Randomize the background images ! Eg, when visitors first arrive at the site, they will be shown image A+B for the background ( left and right ). If visitor continue to view 2nd page, there will be another set of images ( let’s say A1/B1 ) to be shown.
    and so on…eg, if I have 4set of background images ( A1/2/3/4 & B1/2/3/4 ), each set are to be randomized.

    Possible ?

    Thanks !

  5. Hi!

    If you use padding this doesn’t work on IE. You have to use margins instead.

    Al Pease: I’ve been thinking about that too for a while, and I can’t get a solution yet. But, however, is really necessary that kind of image alignment? I think that if there’s a simple form to do that, we’ll yet have to find a real use for that. :P

  6. What about IE6 ? Doesn’t wrap at all… is there a way around this?

  8. This works fine with static text and pre-defined tags, but what about trying to print out some dynamic text? Where would the tags go?

  9. it doesnt work on mine!!help

  10. Thank you for your tip.I will be thank ful to you for it every time since it increased my earnings.Thanking you agian.

  11. this trick similar type like plugins that i use…
    even very easy to use this plugins,
    you just put your ads, n you can put ads at top, midle, or bottom your content..

    but, this great tricks

  12. doesn’t seem to work in latest opera ?

Leave a Reply