Using CSS to Wrap Text Around Images

Last night a friend asked me about floating images in his posts. I gave him a quick answer with the promise of a full followup today.
When you're writing a post you basically have two ways of floating an image. The first is pure HTML and can be done quickly without any advance setup. While it's quick - it's also dirty. Using HTML to float an image can lead to unexpected results in many browsers and, in extreme cases, may cause your theme to fall apart completely when viewed by some visitors.
The alternative to an HTML implementation is CSS. By adding two lines of code to your stylesheet you can setup your theme to display images, inline, in any post easily. I'll cover both methods but I highly recommend using CSS as a first choice.

Creating Inline Images with HTML

Floating an image with HTML, as I mentioned, is quick and dirty. You can certainly do it but you'll find that your document doesn't validate well and may ultimately behave in unexpected matters in some browsers.
To float an image using pure HTML simply add the "align" attribute to your image tag. To float an image to the left of your paragraphs just add align="left" to the image tag before you close it. The image floating to the left of these paragraphs uses this method.
Obviously it's not perfect at first glance. Without margins the text looks cramped next to the picture and (if you're using certain browsers) it may look pretty awful. You can prettify this a bit by adding a margin but that would require some CSS work. Why not just do it all at once with CSS?
The code for the image above looks like this: <img src="Image URL" align="left" />

Floating Images with CSS

With CSS you have two choices. The first is similar to the one above while the second requires the use of an external stylesheet. If you can edit your stylesheet I definitely recommend using the second method.
To add some CSS styling directly to your post simply add the style attribute and a little CSS. Assuming you want to float the image to the left of your text simply add "float:left." I also recommend adding a margin as well. If you're floating an image to the left of text you'd add the margin on the right side (as a buffer against the text.) The code for the image to the left looks like this:

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

Adding CSS to an External Stylesheet

The absolute ideal option for setting up inline images is to setup up special class selectors in your external stylesheet, for most WordPress installations this would be the style.css file in your theme directory. In my style sheet I have two classes setup, one for aligning left and one for aligning right.
The section of my stylesheet that handles this is shown below:

.alignLeft { float:left; margin-right: 1em; }

.alignRight { float:right; margin-left: 1em; }
When I create an image I simply add a class attribute with the appropriate selector. If I use this system the code for the image above would look like this:

<img src="ImageURL" class="alignLeft" />

Notes on CSS and Inline Text

While I concentrate on wrapping text around images in this post you can use the same ideas to wrap text around other items like advertisements and special text blocks. The "alignLeft" and "alignRight" classes that I setup are actually used throughout this theme (and in others I've authored) to float just about everything that needs floating. Because CSS is versatile you're limited only by your imagination.
Disclosure: The two images used in this post are the covers of two books that I personally own and recommend for anyone interested in CSS. The CSS Pocket Reference is a quick guide I've found helpful for refreshing my memory and The Zen of CSS Design: Visual Enlightenment for the Web is a great companion for learning about CSS and getting some ideas for theme design.
If you found this post helpful please rate it using the SpotBack widget below or leave a comment. I look forward to your feedback.

Source: http://bill2me.com/2007/04/18/using-css-to-wrap-text-around-images/