Art alignment and text wraps

Wrapping text around an image adds a note of professionalism to a blog.  However, text wrapping can go wrong in so many ways.

Some things to look out for:

• Text doesn't line up with the top of the image.  This is usually a case of extra white-space (spaces, line-breaks, etc.) between the image and the text in question.  This is particularly the case when Dashboard –> Settings –> Formatting –> Convert line breaks is set to "Yes."  (Unfortunately, this is Blogger's default setting and is needed to make Blogger's own text editing tool work properly.  If you only make posts using a third-party editing tool, you should try setting this to "No" to see how your posts look when imported.)  To fix: edit the entry and pop over to Edit HTML mode.  Remove any extra spaces between the closing link tag (</a>) and the first characters of your text.
• Text is crammed up against/too far away from the image.  When Blogger inserts an image, it adds a bunch of embedded style commands to reflect the options you selected in the Upload Images dialog.  While this causes me no end of headaches, it does have its advantage: you can customize the margin around images on a case-by-case basis.  Again, edit the post in Edit HTML mode and find the image tag (<img âfiı />).  In that tag is a style attribute which, among other things, lists "margin: 0pt 0pt 10px 10px" – which deciphers to "set a margin of 0 points (pixels) on the top and left and a margin of 10 pixels on the bottom and right of the image."  Adjust the numbers as needed to correct the spacing around your image.  Note: the numbers represent the top, right, bottom and left margins in that order.
• Text appear in a thin column down one side of the image.  This happens when "left" or "right" alignment is selected in the Upload Image dialog and the image size is not wide enough to cover the entire content width.  Again, we benefit from Blogger's bit no-no of embedded styles.  In this case replace float: left (or float: right) with display: block.