This is a remake of Eric Meyers ragged float. This is very similar to Erics, with the difference that a single image is used, and positioned using CSS. The idea is to float DIVs into place (instead of images), with a fixed width. So when the text goes to fill the page, it hits the DIVs and makes the text float along side the images curves.

To get the desired affect, there were 18 DIVs used. Each with a specified width. To see how it works better, download this page, and uncomment the border: 1px solid red; line. It will outline each of the 18 DIVs and show exactly how this demo works.

The advantages of this version over Erics, is that only a single image is used. The single image size is smaller than using 18seperate images. That makes download times faster. If the user doesn't support CSS then they don't see an image, and the text would flow like it would on a normal screen.

For more information, see Eric Meyers ragged float demo.