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:
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:
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:
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…
Here’s the code in my Word Press site and really, no matter where I put the suggested “vspace hspace” nothing happens. What am I doing wrong here?
<a href=”http://daves.meintl.org/files/papa-prayer.jpg”><img src=”http://daves.meintl.org/files/papa-prayer.jpg” alt=””class=”alignleft size-thumbnail wp-image-105″ /></a>
I have a picture with text wrapped around it on my myspace. I want to put it in a scroll box, but when I put it in a scroll box; it dissapears. Please help. Thanks.
okay i have a question how do i put a picture on the othe side of a scroll box without pushing the scroll box down?
Great answer dave, I just started a tech support website as well and I am learning a lot about coding and I had the same problem with drupal, however once I integrated html code the problem went away.
http://www.beyourownit.com
I would love some feedback
Hey Dave,
Thanks so much for these tip! thanks to this article – I was able to format my post god enough to make the Digg home page:
http://www.copybrighter.com/blog/social-media-in-the-1990s
Great little snippets of code, there.
-Brett “From Tibet”
If WordPress keeps changing DIV tags into P tags, here’s how to fix it:
http://wordpress.org/support/topic/128538
Great feedback Dave!
Just a note for any WordPress users out there. I’ve found some of the available themes are broken in this regard.
It doesn’t matter whether you align left or right, it has no effect.
Sometimes I’ve been able to fix the problem in the template or CSS, and others I’ve just chosen a theme easier to work with.
Just a word to be wary…
Good stuff, Dave! This makes it very simple.