I recently had a request from one of my regular readers, Marg who presides over the most excellent Marg's Pets blog. It seems that Marg is feeling a bit unsure about getting images positioned on her blog. I can understand this, as many bloggers have little or no experience with the HTML and CSS code used to get their blog posts to render in a browser. So today I am going to give those of you who are interested, a little crash course on how to position images in your blog posts. Of course, not all blogging software is the same, so I will keep this very general. But I think you'll be able to figure it out.

Follow up:

At the end of this post, you will find a download of the tutorial as a PDF file so you can save it on your hard drive for future reference. I also am including a quick reference HTML page that you can open in your browser, in another tab or window while you are creating your posts. You can then easily copy and paste the code snippets you will need to position your images. Okay, shall we get started?

Let's say that you wanted to get an image centered in your blog post, just like the one above. First you need to insert an image. It is a common practice to insert the image above the first paragraph of a blog post. This way it appears at the very top of your post. Alternatively, you can insert an image between two paragraphs in your blog text.

To see the markup code that directs the browser where to find the image to display, you will need to have your blog editor in HTML or Source mode. An inserted image should appear similar to the one below:

<img src="http://www.sxc.hu/pic/m/m/mi/mikkolo/1082634_sheep_on_grazing_ground.jpg" />

Your inserted image might have more code around it or in it, especially if it is linked or if it includes a title or alternate text. You don't need to worry about that. What you are looking for is the part that looks like this <img. I am going to give you a snippet of text to insert after that part of the code. That little line is what will center the image for you. The code you will be inserting is this:

style="display:block;margin:0 auto;"

So when you insert the above snippet of code after <img the code for the centered image above it looks just like this:

<img style="display:block;margin:0 auto;" src="http://www.sxc.hu/pic/m/m/mi/mikkolo/1082634_sheep_on_grazing_ground.jpg" />

That's it no magic no lengthy explanation. You don't need to understand why this works, just use the snippet of code. Insert it after <img and leave a space before and after the snippet. Just like in the example above.

Positioning An Image To The Right

Now we're going to try something a little bit trickier. We're going to take an image and position it to the right of our text, just like in the example below. The instructions begin after the example image and paragraph. I just used some dummy filler text for our demonstration. So skip down to where it says Image Right Example.

This is dummy text for our example. I don't have anything to say, not really, but to see how this right floated sheep was accomplished check out the next paragraph. Facilisi euismod dignissim praesent nulla, enim duis lobortis. Quis dolor, quis consequat eu enim iusto facilisis nisl in eu ea ut. Lobortis volutpat feugait ut hendrerit te, vero te delenit et, suscipit te aliquam feugait, dolore euismod. Vel nonummy sed sit iusto, qui vel suscipit facilisi aliquip, ea ullamcorper nulla vel ex duis nulla. Dignissim vulputate nibh in, feugiat autem adipiscing suscipit qui, at consectetuer et dolore veniam nibh feugait facilisis. Aliquip eros et adipiscing illum blandit aliquip ex facilisis ad facilisi aliquip illum blandit, dignissim ullamcorper odio eu hendrerit blandit esse. Eum exerci nostrud feugiat hendrerit et facilisis delenit dolor praesent quis, ex delenit.d facilisi tation velit minim diam, veniam et ut odio sed commodo molestie. Ut iusto laoreet erat delenit illum, eros wisi adipiscing, nisl tation accumsan. Sit in, lobortis erat feugiat eros, consequat at ut diam, exerci elit sit enim at et nulla lobortis nulla dolor.Aliquip eros et adipiscing illum blandit aliquip ex facilisis ad facilisi aliquip illum blandit, dignissim ullamcorper odio eu hendrerit blandit esse. Eum exerci nostrud feugiat hendrerit et facilisis delenit dolor praesent quis, ex delenit.d facilisi tation velit minim diam, veniam et ut odio sed commodo molestie.

Image Right Example - This isn't that much harder than centering an image, but there is a little more to it, so pay attention. Here is the new code snippet you will need to send an image to the right of the paragraph text:

You are going to do the exact same thing with this snippet as you did with the one for centering an image. Insert it right after the <img part of the tag with a space before and after the snippet. It will look much like this.

I would love to tell you that this is all you need, but I did warn you that there was a little more to it. The code used to insert your image must be included between the paragraph tag and the beginning of your paragraph text. You will have to be in HTML or Source editing mode in your blog editor to see where the paragraph tag is. You will be inserting the code for the image to be included, right after the paragraph tag <p>, not hard to spot seeing as how it is the letter "p" surrounded by angle brackets. So the code for the above looks like this:

Some editors automatically assume a line break is the end of the paragraph and don't visually use tags, but they will let you insert them in HTML/source mode. Simply type them in so they surround your image code and your paragraph text (just like in the example above). You only need to do this for paragraphs that you want to position an image next to.

So if your blog editor is in HTML/source mode and you don't see a <p> at the beginning of your paragraph and a </p> at the end, you will have to add them. Type the beginning tag <p> before the inserted image and type the closing paragraph tag </p> at the end of the paragraph text. Note that the tag at the end has a slash before the letter "p". This is the one under the question mark on your keyboard. Don't leave out the slash on the tag at the end or you may really confuse the browser when it tries to display your post. Examine the example above to get a better grip on what you are going to be doing.

An Image To The Left

Now we are going to make a few changes to our snippet, and position an image to the right of our text. Skip down to the Image Left Example below for all the details.

This is dummy text for our example. I don't have anything to say, not really, but this is the example of how to posistion an image to the left of a paragraph. Facilisi euismod dignissim praesent nulla, enim duis lobortis. Quis dolor, quis consequat eu enim iusto facilisis nisl in eu ea ut. Lobortis volutpat feugait ut hendrerit te, vero te delenit et, suscipit te aliquam feugait, dolore euismod. Vel nonummy sed sit iusto, qui vel suscipit facilisi aliquip, ea ullamcorper nulla vel ex duis nulla. Dignissim vulputate nibh in, feugiat autem adipiscing suscipit qui, at consectetuer et dolore veniam nibh feugait facilisis. Aliquip eros et adipiscing illum blandit aliquip ex facilisis ad facilisi aliquip illum blandit, dignissim ullamcorper odio eu hendrerit blandit esse. Eum exerci nostrud feugiat hendrerit et facilisis delenit dolor praesent quis, ex delenit.d facilisi tation velit minim diam, veniam et ut odio sed commodo molestie. Ut iusto laoreet erat delenit illum, eros wisi adipiscing, nisl tation accumsan. Sit in, lobortis erat feugiat eros, consequat at ut diam, exerci elit sit enim at et nulla lobortis nulla dolor.

Image Left Example - Like I mentioned, this is very similar to sending an image to the right of your paragraph text. Here is the new code snippet you will need to send an image to the right of the paragraph text:

Insert this code in the same place as you would for the image right example, right after the <img part of the html code, making sure that your image is inserted inside the paragraph, right after the <p> paragraph tag.

that we have only made a few changes from the snippet used to send an image right. The float and clear values have each been changed from "right" to "left". I also adjusted the values for the margins surrounding the image.

I want to take a moment to mention the margin values and what they are included for. If we didn't set some margins, the image and the text would butt up against each other in a very unattractive way. The numbers after the margin selector push the text away from the image. For reference purposes the values are set in the following order:

margin: top right bottom left;

You can change the numbers in the code snippets if you want to increase or decrease the amount of space between the image and the text. But the settings I used seem to strike a pleasing balance. As for the centered example, you won't see any margins in the HTML code snippet. That's because it is inserted between two paragraphs. And paragraphs, by default, already have top and bottom spacing added to them. So you can get away without adding margins on centered images if they are inserted between, instead of in paragraphs.

The instructions for where to place the code for a right floated image are exactly the same as were for a left floated image. So the code for the above left floated image example would look like this:

Okay, all done. Below is a quick reference guide for you to copy and paste your positioning code snippets from.

For quick reference:

1. Centering an image, insert this snippet:

style="display:block;margin:0 auto;"

right after the <img section with a space before and after the snippet.

2. To position image to the right, insert this snippet:

right after the <img section with a space before and after the snippet. The inserted image should be inside of (to the right of) the opening <p> tag for the paragraph that you want the image to float away from.

3. To position image to the right, insert this snippet:

right after the <img section with a space before and after the snippet. The inserted image should be inside of (to the right of) the opening <p> tag for the paragraph that you want the image to float away from.

I really hope this helps more than it confuses. I tried to keep it simple and used real examples to illustrate what I am trying to communicate. And as promised you can download the PDF and HTML files here:

image_positioning_tutorial.zip

Best thing to do until you get the hang of it, is to keep the HTML copy open in another browser tab or window so you can reference it. Just copy and paste the snippets as needed.

Now if I didn't scare you away with this tutorial, how about learning to add borders, padding and a background color? You would learn how to get an effect like this:

Should I prepare a tutorial for this too? I don't mind putting in the work if someone is going to actually be able to use the info. As always leave your comments and let me know what you think.

Humbly Yours,

Blog Angel (Sometimes called Joella)