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);
}