evolt.org Workers of the Web, Evolt!

CSS has enabled immense flexibility in the positioning of images on HTML pages. If used correctly, it can help create page designs match that of print. Using CSS, it is now possible to wrap text tightly around images, similar to that seen in printed books. Of course it isn't exactly news that CSS can be used for wrapping text. I have seen large number of sites using sliced images for wrapping text around ragged outlines. I didn't want that so I present an alternative that I just discovered.

Using Image Slices

Some time back, Eric Meyer had put up a neat tutorial on creating ragged floats, wrapping text around an irregular outline of an image. This, he achieved by slicing the image into horizontal strips and placing them one below the other. With my example it would be like this -

And so on. See a full example of this method.
(Borders have been shown to distinguish the images)

To achieve wrapping of text around the ragged outlines of the image, he stacked up the image slices and floated them using this class -

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

That's it! Pretty simple and clean. But it has its own disadvantages. what if I do not want to slice images? What if I want finer control on the wrapping? Do I need to re-slice the images with different heights?

An Alternative

In simple words, we create a div with background as this image. Then use spacers or ideally divs again to wrap the text around the background image's irregular outline. The following is the id definition for the container div -

  #toycycle{
      background-image: url(toycycle.jpg);
      background-repeat: no-repeat
      background-attachment: scroll;
      margin: 0px;
      padding: 0px;
  } 

This tells the browser to put toycycle.jpg as the background image for the div. 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.

For arranging the outline, you can either use spacers or divs. For both, the CSS class remains the same as the earlier method --

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

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. In case of divs, add a font-size:8px; attribute to negate any effects of font size changes on the divs. Now, you use the id and class in this way --

<div id="toycycle">
  <img src="0.gif" alt="0" class="flowing" border="0" width="105" height="20" />
  <img src="0.gif" alt="0" class="flowing" border="0" width="110" height="20" /> 
  <img src="0.gif" alt="0" class="flowing" border="0" width="115" height="20" /> 
  <img src="0.gif" alt="0" class="flowing" border="0" width="110" height="20" /> 
  <img src="0.gif" alt="0" class="flowing" border="0" width="98"  height="20" />
...
  <img src="0.gif" alt="0" class="flowing" border="0" width="220" height="20" />
  <p> Text goes here </p>
</div>

In case of divs --

<div id="toycycle">
  <div class="flowing" style="width:105px; height:20px;">&nbsp;</div>
  <div class="flowing" style="width:110px; height:20px;">&nbsp;</div>
  <div class="flowing" style="width:115px; height:20px;">&nbsp;</div>
  <div class="flowing" style="width:110px; height:20px;">&nbsp;</div>
  <div class="flowing" style="width:98px; height:20px;" >&nbsp;</div>
...
  <div class="flowing" style="width:220px; height:20px;">&nbsp;</div>
  <p> Text goes here </p>
</div>

Place the transparent spacer gifs before the text and place them only as much required. Assuming the background image has a height of 400 pixels, if you take each image 20pixels high, you'll need about 20 spacers/divs stacked up to cover up the whole image. Adjust the width of each image accordingly. You can experiment with height to achieve smooth text flow over the image. I have observed that if the height is more or less equal to the text, you get smooth fits.

See a fully functional example of this alternative technique, with divs and with spacer gifs.

Why use this method?

• It does away with the need of slicing images.
• Easy to change parameters in case the text does not fit well.
• More compatible with 5.x browsers. Eric's method has a problem with IE5.0 placing the images above text and Opera 5.x placing text above the images. This technique shows up almost similar in most browsers including the latest ones.
• It degrades better than Eric's method(if you use divs, which I think are preferrable).

Happy wrapping!