The other day I learned how to wrap text in a paragraph next to an image. Normally I hate dealing with CSS as I’ve found it to be very twiddly and time-consuming to get the right effects and I stay away from it but this site explains the wrapping fairly well (I like the analogy of the text on the page flowing around images like water in a stream) AND it links off to the official CSS 2.1 documentation with examples.

Another page that talks about this in the context of a larger example is Fancy Form Design Using CSS which I’ve found to be awesome!

Since I only wanted text floating around selected images in the posts of this Wordpress blog all that was required was creating a new style class to apply to any images where I want the text to float:

.floatimg{
  float: left;
  padding:5px 10px 5px 5px;
}

All that is now required is to add the new class “floatimg” as an attribute to the img tag where I want the text to wrap around:

<img class="floatimg" src='http://alweb.homeip.net/dw0rm/dblog/wp-content/uploads/2008/04/river.jpg' alt='River' />

Easy!