Gadgetopia

Photo Cards: Here’s a good, simple, obvious solution to an annoying problem. Whenever a picture needed a caption, I surrounded the entire thing in a DIV and floated it left or right. However, I had to set the width of the DIV so it would float correctly, and to do this, I had to know the width of the image, which may or may not have been available at code-time.

Though, we have to remember the width of floated blocks must be set (otherwise they may be spread to the full width and there’s no floating). Of course, we can solve it by setting display:inline to the DIV — the width of floating element is then adjusted by its content. But we have to remove all blocks inside it (inline elenent must not contain blocks) and use only line breaks BR. Sometimes this simplified formatting may be sufficient.

I never would have thought to set a DIV to “display: inline.” Yes, now you have an ugly BR tag, but you’ve traded an unknown problem (the width of the image) for a known one (the existence of a BR), and I can live with that.

(BTW, I’m finding all these great CSS articles via this feed, which has the most fantastic set of CSS links I’ve seen every single day. I don’t know anything about the site except that each day its full of great new solutions to thorny CSS issues. I understand its some kind of roll-up site for a bunch of CSS links from a bunch of different people, but I don’t really care. Just keep them coming.)