I’ve been blogging for a few weeks now and have taken to heart the advice you gave about trying to include graphics, images or photographs in blog entries. Problem is, I can’t figure out how to have the text flow around the graphic and it’s getting really annoying. How do you do that on your business blog entries?
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:
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:
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:
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:
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!
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…