Many bloggers swear by the use of images in their posts. Images are a quick way to provide flair for your posts as well as increase their readability. In most cases a solid graphic can also help people better understand what exactly your writing about.

When designing a theme, or even just tweaking a theme for your own use, it usually pays to take a few seconds to create a some special rules for dealing with images. In this post we'll cover the use of HTML and / or CSS for managing images as they'll appear on your site.

The red block you see throughout this post is meant to illustrate the various benefits and shortcomings of each method.

Aligning Images with HTML

The first, most basic, method of aligning an image involves the use of some simple HTML. While it's a quick option it remains a relatively dirty solution. Using this method you can float images in your RSS feed and in most major browsers - it's just not really compliant with the standards that are defining web design these days.

To get started simply add the image to your post as you normally would. Before closing the image tag you're just going to add a new attribute. After you've typed out the full image tag simply add align="left" to the end of the tag.

Red BlockThe image aligned next to this paragraph uses the align="left" to align our red block. The code for that image looks like this: <img src="Image URL" align="left" />

Aligning Images with CSS

Though HTML works in some cases the best way to float an image involves the use of CSS. There are basically two ways that you can use CSS to align an image. The first, which we'll discuss here, is done inside the document. The second method involves the use of your external stylesheet - we'll go over that in the next section. In the long run the use of an external stylesheet is preferable but we'll cover the first for those who don't have access to their stylesheets.

For CSS we'll be adding an attribute similar to the align attribute used above. Using the style attribute and some CSS you can float the image and overcome the cramped look you see above. To start we need to align, or float, the image. This is accomplished by adding "float: left" to the style attribute.

Red BlockTo put a border around the image we'll just add a margin to the right side using "margin-right: 5px." The image to the left is a result of the HTML markup seen below.

<img src="Image URL" style="float:left; margin-right: 5px; />

Floating an Image with an External CSS Class

If you have access to your stylesheet I recommend taking this just a bit further. By creating two new classes in your stylesheet you can cut down on the code you put into each post and you can also guarantee a bit of flexibility down the road. Every stylesheet I create includes two custom classes specifically for items that I intend to have appear inline. These two classes are "alignLeft" and "alignRight" ... can you guess what they do?

To begin you'll want to open up your style.css file and find a good spot for some custom code and add the following:
.alignLeft { float: left; margin-right: 5px; }
.alignRight { float: right; margin-left: 5px; }
Red Block Returning to the image tag you can simply add the class attribute and then name the appropriate class. The most recent example shows this code at work and the block below is the code used.
<img src="Image URL" style="alignLeft" />

Notes

The code above was specifically designed for aligning images with text but it can also be used for other purposes. On worGamer.com I use the same principles to create my header which contains text and an advertisement which are aligned in a similar fashion.

As a rule you should always pay close attention to how bit the item you want to align is. It never makes sense to try aligning text around an image that's larger than half the size of your content area mostly because it makes things look horribly cramped. If you do have a large image you want aligned in a special fashion try centering it instead.