How To Wrap Text Around Images Using CSS In Your Blog Posts?

In this article I want to show you how you can manually insert an advertisement into your post without having the need to find, install and configure a WordPress plugin. Many bloggers many come to a time when they want to promote a product, business or service on their blog in a post.

While there are WordPress plugins that can help with this on a more full time basis, many bloggers many only need to worry about inserting banners into their posts every so often. For whatever the reason may be, whether you would like to insert promotional banners into your posts manually on a full time basis or part time, this little trick might be something you enjoy.

In this tutorial, let’s use a Pepperjam graphic for an example. Below is the standard 300×250 Pepperjam graphic:

I was able to insert this banner into my post by copying and pasting the HTML code given to me from Pepperjam as shown below:

<a href=”http://www.gopjn.com/t/QjtAREY_O0dBPztBQ0M”><img src=”http://www.gopjn.com/b/QjtAREY_O0dBPztBQ0M” border=”0″ width=”300″ height=”250″ title=”Rumors Are True” alt=”Rumors Are True”></a>

Now this looks all fine and dandy, but to be honest it takes up a lot of vertical space on your blog post causing people to scroll down. Wouldn’t it be better to style this banner so that the content wraps around it? You can easily do this using some very basic CSS code. Here is an example of what your banner advertisement can look like it a post with just a few basic lines of CSS added:

This looks much better doesn’t it? Want the trick?

The above screen shot looks a lot better than the live version above. So the trick is very simple I am going to show you TWO ways that you can do this:

Method #1: Add CSS Code direct to the post:

Remember our HTML code that Pepperjam gave us? Here is the example of it below:

<a href=”http://www.gopjn.com/t/QjtAREY_O0dBPztBQ0M”><img src=”http://www.gopjn.com/b/QjtAREY_O0dBPztBQ0M” border=”0″ width=”300″ height=”250″ title=”Rumors Are True” alt=”Rumors Are True”></a>

Now remember, if we just add this code above without doing anything, the graphic will appear as shown LIVE at the very top of this post. We have to add some CSS code to this banner advertisement HTML code in order for the content of the post to wrap around it. Here is how we do that:

<div style=”float:left;padding-right:10px;”>
HTML CODE GOES HERE
</div>

That is all you need to do to wrap your post content around a banner. The complete example would look like this:

<div style=”float:left;padding-right:10px;”>
<a href=”http://www.gopjn.com/t/QjtAREY_O0dBPztBQ0M”><img src=”http://www.gopjn.com/b/QjtAREY_O0dBPztBQ0M” border=”0″ width=”300″ height=”250″ title=”Rumors Are True” alt=”Rumors Are True”></a>
</div>

Pretty simple, huh? I bet you didn’t realize how simple it was to make your banner advertisements look so good in your blog posts. As long as you know this very simple CSS trick, you will never need to worry about trying to find a WordPress plugin to do this, unless you are wanting more advanced management.

You can use the simple CSS trick even for images that you want to put into your posts as well. It doesn’t just have to be advertisements. Additionally, you can use the CSS trick to insert text into it and have your normal post content wrap around this extra text.

Method #2

The second method is really basically the same as the first method; however, it just makes life a little easier for you when you want to use the code in future posts.

Instead of having to worry about all this CSS mumbo jumbo in each post, wouldn’t it be easier to remember to use this instead:

<div id=”imagewrap”>
HTML CODE GOES HERE
</div>

That looks a lot nicer and even more simple! So how do we do that instead of method #1? Simple…

Open up your current WordPress Theme style.css file and add this these lines of code. You can add this code pretty much anywhere on the style.css file, perhaps so that you can remember where you put it just in case you want to remove it later, you should then put it on the very top of the file or the very bottom. Really though, it doesn’t matter.

Add this code into your style.css file:

#imagewrap {float:left;padding-right:10px;}

Be sure to make a back up copy of your style.css file before you go modifying it. After you add this simple line of CSS code into your style.css file, simply save the file and you’re done.

Now when you want to ad a promotional banner to your posts, things are even easier. Here is an example:

<div id=”imagewrap”>
<a href=”http://www.gopjn.com/t/QjtAREY_O0dBPztBQ0M”><img src=”http://www.gopjn.com/b/QjtAREY_O0dBPztBQ0M” border=”0″ width=”300″ height=”250″ title=”Rumors Are True” alt=”Rumors Are True”></a>
</div>

How Do I Float The Image To The Right?

Perhaps you do not like the image floating to the left and would like to have it float to the right. You can simply do this with this code:

<div style=”float:right;padding-left:10px;”>
HTML CODE GOES HERE
</div>

What Do These Codes Mean?

Let’s talk about that for a minute so that you understand what is going on here.

1. float - this tells the image what direction to float or appear on a page. You can float an image to the left or the right.
2. padding - this tell the image to have some extra space surrounding it. You can add extra padding to the top, right, bottom or left side of an image.
3. div - div tags are enclosures that allow you to style HTML code within. Div  tags create an imaginary boundary around things such as an image, text or and common html elements. Div tags are the root to being able to style things the way you want using html and css.

That’s Cool… what other tricks to you have?

I know a lot about CSS and HTML here are a few more tricks that you might like or find useful to use with your blog posts.

Float Image Left with Right and Bottom Border:

<div style=”float:left;padding-right:10px;margin-right:10px;border-right:1px solid #A9A9A9;border-bottom:1px solid #A9A9A9;”>
HTML CODE GOES HERE
</div>

Ok, so let’s break this down:

1. We have floated an image to the left. That means that text will wrap around the right side of it.
2. We have added some space between the right side of the image so that the text doesn’t ride on it so closely. In this case I have added both extra margin as well as padding with a combined space of 20 pixels. You can add top, right, bottom and left margin space just as you can add padding. Experiment with the two and you’ll begin to see the difference between margin and padding.
3. We have added a border to the right side as well as the bottom of this imaginary box. Again the imaginary box has been created by adding the <div> to </div> code. All the styling we do will be applied ONLY to the elements that are within these brackets.
4. The border we have added to the right side and bottom is 1 pixel in width, it is solid and we have added the #A9A9A9 color to it.

Would you like for me to write more about HTML/CSS?

If you enjoyed this post and would like for me to write more about HTML/CSS drop me a comment and let me know. I know HTML/CSS like the back of my hand and will be happy to continue providing tutorials like this one. All yo have to do is drop me a comment and let me know.

Did you enjoy reading this post? I want to invite you to subscribe to my blog so that you won't miss my next article. Subscribing to my blog is totaly free. Simply, enter your email address in subscription box below and immediately you will start to receive copies of my articles sent to you by email. Your email address is never shared and you can unsubscribe anytime.