Nilesh's Weblog

img.flowing { 
  float: left; 
  clear: left; 
  margin: 0 2em 0 0;
}

Note that this method isn't more simpler than Eric's method. In fact, initially, you'll need lot of patience to align the image correctly. Given the effort required, there are many advantages of using this method. First, if you feel that you need finer control on the wrapping of text, it is as easy as find and replace in the code. You don't need to re-slice the image with different heights. Second, partial loading of an image wont look as bad as in the sliced version, if you use progressive/interlaced images. Unfortunately, as with the earlier method, browser support is limited to 6.x and greater versions.

To explain in plain words, we create a <div> with the background being the image to be wrapped. Then using multiple blank 1x1 gifs/pngs, we wrap the text around the image in background. This gives us flexibility in deciding the heights and widths of the transparent images we are using. You can vary the heights and widths for finer wrapping of text. In what I have done above, I have used constant heights (20px), and so a bit of unevenness can be seen on the wrapping edge.

Now down to the exact code. I used the following id definition for the div:

#toycycle{
  background-image: url(toycycle.jpg);
  background-repeat: no-repeat
  background-attachment: scroll;

}

or in short,

#toycycle{
  background: url(toycycle.jpg) no-repeat scroll ;
}

This tells the browser to put toycycle.jpg as the background image for the div `toycycle`. The scroll value fixes the image relative to the div position and allows it to move alongwith the div. Also the no-repeat value prevents tiling of the image.

And the image class is

img.flowing { 
  float: left; 
  clear: left; 
  margin: 0 2em 0 0;
}

The float:left attribute allows the image to stick to left side of the div and the clear:left attribute clears up any text on the left side of the image. You can increase or decrease the space between images and text by changing the margin attribute. Now, you use the id and class in this way:

<div id="toycycle">
<img src="0.gif" alt="" class="flowing" 
     border="0" width="105" height="20" /> 
<img src="0.gif" alt="" class="flowing" 
     border="0" width="110" height="20" /> 
<img src="0.gif" alt="" class="flowing" 
     border="0" width="115" height="20" /> 
<img src="0.gif" alt="" class="flowing" 
     border="0" width="110" height="20" /> 
<img src="0.gif" alt="" class="flowing" 
     border="0" width="98"  height="20" />
...
<img src="0.gif" alt="" class="flowing" 
     border="0" width="220" height="20" />
<p>Note that this method isn't more simpler than 
Eric's method. In fact, initially, you'll need lot
 of patience to align the image correctly. Given
...</p>

Place the transparent images before the text and place them only as much required. For example, assuming the background image has a height of 400pixels, if you take each image 20pixels high, you'll need about 20 transparent images stacked up to cover up the whole image. Adjust the width of each image accordingly. You can experiment with this to achieve smooth text flow over the image. See a live example on my About page.

I haven't tested this on browsers other than Mozilla 1.0+, IE6.0 and Opera 7.01. It would be nice if someone tells how this looks on other versions of browsers. Though I think, there wouldn't be a problem with 5.x browsers, given their support for background attributes and ids