ragged float
Advanced CSS and browser bugs, served hot and fresh for your enjoyment!
First there was slantastic and then curvelicious, which showed how to get text to flow along curves and straight diagonals. The next step seemed obvious: to get text to flow along an irregular outline. Thanks to curvelicious, it turns out to be much less complicated than one might expect. In fact, to create a layout with text flowing along an irregular outline should require nothing more than to replace the curve with a different set of graphics.
Unfortunately, browser support isn't everything one might hope. The big problem is with browsers not being completely aware of where a line's content might be drawn. This leads them to write some text over some graphics, which might be a desirable effect under other circumstances but is unwelcome here. This problem affects Opera in some cases, and also IE5.x/Windows on occasion. The only major difference is that in IE5.x, the text will be overwritten by the floated images, whereas in the others the text overwrites the images. IE5.x/Mac runs into the same problem that felled it in slantastic, which isn't too bad but it might make some layouts look a bit odd. It does manage to avoid having text overlap the floated images, at least.
This is another demonstration that really benefits from changing the text size, particularly in the smaller direction. The smaller the text, the more easily it will "wrap" itself to a rough outline of the image shown.
So What Good Is It?
These do not seem to be overly troublesome bugs. You'll note that the image I chose to use has very large "peaks" and "valleys." That is, the outline has a large degree of variation in how far it protrudes into the text flow. An image with more a more gentle outline, so to speak, might allow text to flow past in an irregular fashion without leading to the text/image overlaps this demonstration makes so obvious. In other words, pick an image less likely to cause trouble, and you can use this technique without too much fear.