How To Wrap Text Around An Ad Or Image
Wrapping text around an image or ad not only makes your site look better but can also potentially make you more money if you are using an ad. The reason being that the look is more natural and if you are using text ads the content and the ad itself will blend together better increasing the chance that an individual will click the ad.
Setting up the HTML
In order to wrap the content around an image or an ad we will be using the float property inside of CSS. Lets take a look at some sample code below
<div id="post"> <h1>< ?php the_title(); ?></h1> <?php the_content(); ?> </div>
This is a short sample of what the code on your blog may look like and lets say that you want to place an AdSense ad at the beginning of your content that sits on the left and the content itself sits to the right. Our new sample code would look like
<div id="post"> <h1><?php the_title(); ?></h1> <div id="inpostad"> AdSense code goes here </div> <?php the_content(); ?> </div>
As you can see, we added a new DIV tag into our code that displays the AdSense ad block and gave it an ID of inpostad. You can create whatever ID you like, preferrably something that is easy to remember or that explains what it is for. If you take a look at your page now, you should see the ad being displayed yet the text itself is sitting below it instead of wrapping around it, this is where some simple CSS work comes into play.
Setting up the CSS
Now that we have the HTML part sorted out in order to get the text to wrap around the ad we need to do some CSS work. Open up your style.css file and place the following code inside
#inpostad {
float: left;
margin: 5px;
}
Once you have that in your style.css file, reload the page again and you should notice that the text wraps nicely around the AdSense ad block and looks a lot better. So what exactly is going on with the CSS code?
The first thing you see is #inpostad and this is selecting the appropriate DIV tag so that the CSS knows what to modify. The { is used to signify the beginning of the actual code that does the modifications to the DIV tag itself.
float:left; is the part of the code that determines whether the ad is placed to the left of the text or to the right of the text. If you would rather have the ad placed to the right of the text change float: left; to float: right;.
margin: 5px; sets a 5 pixel border around the entire DIV tag which gives a nice little buffer zone but not too big to look awkward. You can of course change the number to whatever you like as well as determine the margin on different sides of the ad itself. In order to set different margins on different sides of the ad you would use
margin: 5px 0px 10px 3px;
In the above code you see 4 numbers instead of just 1 like in the first example. The reason being that the 4 numbers control each side of the DIV tag instead of one number controlling all sides. In the above example the numbers set the margins on the DIV tag in the following order; top, right, bottom, left. So the top margin of the DIV tag will be set to 5 pixels, the right side won’t have any margin, the bottom will have a 10 pixel margin and the left hand side will have a 3 pixel margin.
There you have it, quite simple wasn’t it? If you have any troubles implementing this code yourself, make sure to leave a comment below and I’ll do my best to help.
Feedback!
If you read this post and understood it great! Let me know in the comments below. If you are still having issues and can't get it figured out, you are more than welcome to leave a comment or send me an email using the contact form and I'll do what I can to help!