Captioned Pictures in CSS

By Deane Barker on August 18, 2004

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.)



  1. Furl is actually pretty cool. It’s like in the way that it lets you keep bookmarks online, yet it does more with them, telling you which things might be interesting to you based on things other people have furled. It can break URLs down by topic (as in CSS and also web development) and present the most-linked-to pages in HTML or RSS format. Very handy, and even more handy when more users start using it.

Comments are closed. If you have something you really want to say, tweet @gadgetopia.