Image caption width to same as image

Question

How can I make image caption width same as image? Now I have the following code:

    
    &         


        
      

Answer 1

You can apply display:table; and an arbitrary initial width, eg. width:7px; to the parent block like figure and everything will work as expected!

Here is a live demo: http://jsfiddle.net/blaker/8snwd/

This solution's limitation is that IE 7 and earlier do not support display:table; and IE 8 requires your doctype to be !DOCTYPE.

Sources:

• http://www.lifeathighroad.com/web-development/forcing-to-wraps-to-the-width-of-an-image-using-css-only/
• W3Schools (can't post link due to stackoverflow's 2-link limit for people with less than 10 rep)