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

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

  1. scrapbooking says :

    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. scrapbooking says :

    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. Al Pease says :

    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?

Leave a Reply