This one is pretty self explanatory. But I should add that if I did have multiple backgrounds it would have made it quite easy to make the layout this was used for be liquid.

Now, as simple as this one looks, for a beginner this was a pain to get the photo to float left while the text image and paragraph float right. It also required a 500x150 background image for the outline. With border images and multiple backgrounds for the photo and header text I could have just used padding to position the paragraph and be done with it.

Actually, with border Images I could have had as much text in the box as I wanted and not have to worry about adjusting the borders at all.

Imagine 15 static pages with a photo similar to this on each one. Instead of editing every photo to put the gradient border and squiggle thing on it, I could use the photo as is for background-image[2] and a transparent png or gif of the gradient & squiggle for background-image[1].

This could have just been a paragraph with 2 background images. And of course the float idea for this sounded great in theory but wasn't as easy to do when I actually tried it for various silly reasons that were all my fault and not CSS or the browser.

Ideas for syntax (Bruno Bueno & ...)

I remember reading something somewhere that gave a very valid reason for floats behaving the way they do in terms of their mass being ignored by their container. But 99.999999999999% of the time the way I use something that I had to float means I have to clear the float.

There needs to be an easy and official css way of clearing floats. Not a hack, not a workaround, not a reliance on a browser bug. I currently use the easyclearing technique found on, but there's no guarantee that IE 7 is going to get that right.