Super Ragged Floats

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!