A couple of days ago I had my first attempt of inserting an image into one of my posts. I wanted to put it at the beginning of the post and have the text wrap around it. If you use WordPress, it’s very easy to do it: on the text editor screen use the “img” command. I would guess other blogging platforms have this option too.All nice and good until I published my post and saw that the text wrapped my image so well that it didn’t leave any space in between them. Needless to say I couldn’t leave things like that.

So I started looking for solutions. While there seem to be more of them, the one I’ll introduce here worked the best for me.

Here’s what I did: I went into my style.css file (all themes I’ve played with so far name it “Stylesheet”) and set up a new class of div. I named it “images”. You could name it anything you want. I gave this new class two parameters: to float left and a 5 pixels padding.

It looks like this:

.images {padding: 5px; float: left;}

“Float: left” makes the image float on the left side of the text and the text wrap around it. I tried without it. The problem I encountered was that the text started about 10 pixels bellow the line where the image is placed. From that point down it would still wrap around the image, BUT with no space. I don’t know why.

“Padding: 5px” gives me 5 pixels of space between the image and the text. Depending on the size of the image and on where the last row of text on the left of the image falls, you might get more than 5 pixels at the bottom.

NOTE: Don’t forget the “:” and “;” as the whole thing won’t work properly (at least in certain browsers).

Now that I had a new class of div I went back to my post and placed the image inside a div:

That’s about it. It works just fine.

Since this is not expert advice, but rather a solution I found through experimenting, which works for me, I cannot guarantee it will work for everyone. It could depend on the theme and the WordPress version you’re using. I can also not guarantee it’s the best solution, although I don’t see why it wouldn’t be. For the experts in the field please don’t hesitate to post your comments and let us know whether we’re doing the right thing or not.

I want to thank Chris for allowing me to share this with you. I hope it helps those with less knowledge in the field of designing, css and the likes and I would love to share some more of my findings with you.

This post was written by Cosmin of the CosminPTR.com blog.