Fit <div> tightly around enclosed image?

Question

The situation is I have an img and I want a pop-over caption-box whose width is the width of the img. I can't add the caption as a child of the img, because img tags don't take children. Hence my idea was to have something like this:

<div>    <img/>    <div>       ...caption...    <div> </div> 

The problem is the outer divs expand to fill the width of their parent, as block elements do, and hence the caption-div becomes equally wide, and I get something that looks like this:

Where the outer div becomes the width of the page, the caption follows the width of the outer div and thus sticks out of the image.

I do not want to manually set the width of the outer div, because I am using this sub-template for images of all shapes and sizes all over the site. Is there anyway to make the outer-div hug the image, rather than fill his parent?

Answer 1

I do not want to manually set the width of the outer div, because I am using this sub-template for images of all shapes and sizes all over the site. Is there anyway to make the outer-div hug the image, rather than fill his parent?

You need display: inline-block combined with text-align: center.

See: http://jsfiddle.net/thirtydot/V3XyK/

HTML:

<div class="imageContainer">     <div>         <img src=".." />         <span>...caption...</span>     </div> </div> 

CSS:

.imageContainer {     text-align: center; } .imageContainer img {     display: block; } .imageContainer div {     position: relative;     display: inline-block;     /* if you need ie6/7 support */     *display: inline;     zoom: 1; } .imageContainer span {     position: absolute;     left: 0;     bottom: 0;     width: 100%;     background: #000;     background: rgba(0,0,0,.5); }