This page demonstrates the concept of flexible drop shadowed boxes using CSS and a graphic...

This box uses shadowdark.gif (53 bytes)

Text can be put around the floating box so that the text flows around the box.

When you get to the end of the floating shadow box the text with then continue underneath the box. This is much like the wrapping properties used in a word processor.

The idea is as follows:

1. Use a holder DIV - this can be positioned absolute/relative/floating.
2. Set the background of this DIV with the semi-transparent gif. This becomes the shadow of the box.
3. Finally, use a relatively positioned 'content' DIV inside it with: {top:-10px; left:-10px} set in the CSS. Varying these values gets you a relative shadow 'offset'.

Using 24bit .PNG files for the shadow...

This box uses shadow.png (163bytes).

This shows that using the PNG file gives a better look to the shadow as the GIF file is pixelated. As most browers now support PNG files well this is the better option.

The file size is still small enough to not hinder download times.