How do I have text wrap around a graphic on my blog entry?

It turns out that there are two different ways you can have text flow around one side of a graphic (you can't have it flow around both sides as you might see in a magazine, though you could kind of accomplish the same result if you wanted to use a table element of some sort, but that's probably far more work than anyone would do for a single blog entry).

The problem is that with most of the blogging tools when you include a graphic using the tool itself, the code it generates doesn't utilize either "flow" technique, so you end up with a layout like this:

text
graphic
text

rather than having things smoothly integrate.

Fortunately, you can also either tweak the HTML it generates or write your own by hand (yes, even if you host your images on a site like Flickr).

Let me show you the easier HTML way to do this text-flow-around-graphic technique, then we'll explore just a bit of the CSS solution too.

I'll use a small image and the same paragraph of text for my examples, all conveniently lifted from Project Gutenberg. The excerpt is from Jules Verne's The Mysterious Island, and I have what I hope is an appropriate graphic, copied from http://www.lib.uwo.ca/ onto my own server (with a slight tweak to make it more attractive).

First, I'll include the graphic thusly:

Actually, without a further modification to the HTML, text tends to abut the graphic in an unattractive way, so to add a wee bit of spacing, I'll include the hspace (horizontal space) and vspace (vertical space) attributes to the img tag:

This lays out like this:

But while so many catastrophes were taking place on land and at sea, a drama not less exciting was being enacted in the agitated air.

In fact, a balloon, as a ball might be carried on the summit of a waterspout, had been taken into the circling movement of a column of air and had traversed space at the rate of ninety miles an hour, turning round and round as if seized by some aerial maelstrom.

Beneath the lower point of the balloon swung a car, containing five passengers, scarcely visible in the midst of the thick vapor mingled with spray which hung over the surface of the ocean.

Whence, it may be asked, had come that plaything of the tempest? From what part of the world did it rise? It surely could not have started during the storm. But the storm had raged five days already, and the first symptoms were manifested on the 18th. It cannot be doubted that the balloon came from a great distance, for it could not have traveled less than two thousand miles in twenty-four hours.

As you can see, the image is on the right and the text flows around it quite attractively.

You can move the image to the left and the text to the right by simply using align="left" instead:

But while so many catastrophes were taking place on land and at sea, a drama not less exciting was being enacted in the agitated air.

In fact, a balloon, as a ball might be carried on the summit of a waterspout, had been taken into the circling movement of a column of air and had traversed space at the rate of ninety miles an hour, turning round and round as if seized by some aerial maelstrom.

Beneath the lower point of the balloon swung a car, containing five passengers, scarcely visible in the midst of the thick vapor mingled with spray which hung over the surface of the ocean.

Whence, it may be asked, had come that plaything of the tempest? From what part of the world did it rise? It surely could not have started during the storm. But the storm had raged five days already, and the first symptoms were manifested on the 18th. It cannot be doubted that the balloon came from a great distance, for it could not have traveled less than two thousand miles in twenty-four hours.

Where this becomes a bit problematic is when you want to add a caption or otherwise make things look a bit more fancy. Let's say that you want to have the image surrounded by a subtle gray border and within the border you want to have "hot air balloon" as the caption.

You can't do this with HTML without using perhaps a small table HTML structure, which would be a pain. You could use CSS style attributes to change the look of the img tag with a "style=", but that won't encompass the caption too in a way that's widely compatible with mobile phones and other less capable browsers.

The solution? A div container with the text and border attributes you want, all written as CSS.

Here's my stab at this:

By itself, it'll look like this:

hot air balloon

Nice, but what happened to our flow? I've pulled the "align" attribute out of the img tag (and also chucked the "hspace" and "vspace" attributes too) because all of that is best included in the style for the div itself: CSS uses float instead of "align", and spacing outside the border is done with "margin" and inside with "padding". Put it all together and it'll look like this:

Now, let's put it all together and see what we get!

hot air balloon

But while so many catastrophes were taking place on land and at sea, a drama not less exciting was being enacted in the agitated air.

In fact, a balloon, as a ball might be carried on the summit of a waterspout, had been taken into the circling movement of a column of air and had traversed space at the rate of ninety miles an hour, turning round and round as if seized by some aerial maelstrom.

Beneath the lower point of the balloon swung a car, containing five passengers, scarcely visible in the midst of the thick vapor mingled with spray which hung over the surface of the ocean.

Whence, it may be asked, had come that plaything of the tempest? From what part of the world did it rise? It surely could not have started during the storm. But the storm had raged five days already, and the first symptoms were manifested on the 18th. It cannot be doubted that the balloon came from a great distance, for it could not have traveled less than two thousand miles in twenty-four hours.

There ya go. A couple of ways to address your problem. Yes, it seems like a lot of hassle the first or second time, but I'll tell you from experience that once you get the basics stuck in your brain it's quite simple to create these very attractive image inclusions in your blog entries, on your Web pages, eBay listings, whatever. And we've all learned that attractive = trustworthy, right? :-)

Want to learn more about cool CSS tricks you can use with your blogging efforts? Please check out my popular book Creating Cool Web Sites with HTML, XHTML and CSS...