Image Positioning

In this post, I'm going to show one image in several configurations. I am not including the full code that Blogger inserts with images, but just the part needed for positioning. I'm also not showing the full image address: just the image name.

Images are, by default in-line elements. If there is room for them to fit on a line, they will go there along with text or other images.

Default in-line element

This image , for example, is in-line and the image fits, so no style is used. The code for this insert is: <img src="hydrantc3logo-header.gif" /> The image code is between the word image and the comma.

As block element

One alternative is to center the image on the page. The first thing that is need is a conversion to block display, and the other is auto left/right margins: they are added to a style statement. Since I converted it to block display, no line-break was needed before or after the image. I also added small top and bottom magrins. The code is: <img style="display:block; margin: 5px auto;" src="hydrantc3logo-header.gif" /> The margin is 5px top and bottom and auto provides equal left and right margins (block elements only.)

Putting an image alone on a line and on the margin is similar. For the left margin, instead of margin: 5px auto; the left margin is 0px and the right auto, and the top and bottom margins are stated separately. The code is: <img style="display:block; margin: 5px auto 5px 0px;" src="hydrantc3logo-header.gif" /> When four margins are used the order is margin: top right bottom left.

To put it on the right margin, just swap the left/right margin code: <img style="display:block; margin:5px 0px 5px auto;" src="hydrantc3logo-header.gif" />

Float alignment

Float alignment allows the element to move out of the normal flow, onto the container's left or right margin, and allows text (or other elements) to flow alongside. This is the normal format when float alignment is on.

This image, for example, is float:left. The image moves to the left margin and the text flows to the right. The image code is right after This image, so the paragraph starts, then the image jumps in. If I moved the image to the beginning of text, the full paragraph would have been to the right of the image. I added a little top margin, which does not affect the text's line spacing, and some right margin to put a little space between the image and text. The code for this insert is: <img style="float:left; margin: 5px 8px 0px 0px" src="hydrantc3logo-header.gif" />.

This is float right and level with the text. For me that meant moving it before the paragraph tag, <p>, because I write in paragraphs. If you use Blogger's default <br /><br /> paragraphs, it just goes before the paragraph's text.The margin was also changed for proper spacing. The code: <img style="float:right; margin: 5px 0px 0px 8px" src="hydrantc3logo-header.gif" />

Clearing floats

If you are going to float images, it's important to understand clearing. Many people float images then try to use mulitple <br />s to position following text. That doesn't work! You may fool yourself into thinking it does, but people using different browsers will see things differently.

Where you want the float to stop insert: <div style="clear:both"></div> and the following element, text or image, will not start until there is nothing between it and the margins.

Blogger format

When uploading the images to Blogger, there are a couple of choices. The first is to have float alignment enabled on the Settings > Formatting menu. In that configuration, if you select left or right, float: is included, and the text can flow along side. If you select center, display:block is used and the right/left margins are set to auto.

There is an option to turn float alignment off, but it doesn't work for me at the moment (probably a feature.) When it starts working, I'll tell the rest of this story. If you need to turn float off, do it manually by changing the code.

And finally

If you upload with float on and you want to change to block, it's easy enough to do. Edit the post and switch to Edit Html mode. Find the code for the image you want to change and make the change using a sample above. Html is not difficult to work with, most tags make sense. Just work carefully, and make a backup before starting. (That will probably be the next chapter.)

If you upload to another image host, you can use the samples to position the images the way you want: it works with all <img src= /> code.