EFFECTS - CSS: Professional Techniques for Modern Layout - page 192

Figure 5-48: The ragged fl oat in a browser.

Of course, creating all those slices is kind of annoying, and geez, what about the server
overhead? Fortunately, there's an improved variant of this technique, which the next section
explains.

BETTER RAGGED FLOATS
Building on the “ragged l oat” technique explained in the preceding section, Nilesh Chaud-
hari came up with what he called “Super Ragged Floats” in the Evolt article of the same name
( http://www.evolt.org/article/Super_Ragged_Floats/22/50410/ ). Nilesh's
insight was that rather than slice up the image, you could put it in the background and lay
transparent boxes overtop of it. h e drawback of his approach was that it required you to
wrap the enclosing div around both the l oated slices and the content that accompanied
them. So, building on Nilesh's building on the original, here's a variant that lets you have little
self-contained bits of markup to create the curves and ragged outlines.

194

First, consider the markup from the preceding section. Suppose you convert all those images
to empty div s.

< div class="curves">
< div id="sl1"> </ div>
< div id="sl2"> </ div>
< div id="sl3"> </ div>
< div id="sl4"> </ div>
< div id="sl5"> </ div>
</ div>

Now, get the original, unsliced version of the curve image (see Figure 5-49).