Question

I am creating my first blog’s template.

I want to have inline images like wikipedia have next to its articles’ paragraphs. I have achieved this with the following code:

<div class="photo">
    <img src="image_file.jpg">
</div>
div[class='photo'] {
    margin: 10px;
    float: left;
    clear: left;
}
img {
    max-width: 500px;
    min-width: 150px;
    margin: 8px;
}

All works fine up to this point. However, I also want to put a caption below the image file so I introduce a

Caption

right after the

<div class="photo">
    <img src="image_file.jpg">
    <p>Caption for the image file which might be long</p>
</div>

Unfortunately, this <p> makes this photo div expand larger than the photo itself causing it to look funny. I would like its max-width to be as large as the photo and go to the 2nd or 3rd line if the text is large.

How can I achieve this? I tried width: auto; display: block;, putting <p> in another div but it fails.

Thank you for your kind help.

PS. I know I can fix the issue once the page is loaded via JS but I would love to learn to solve it the right CSS way. Thanks!

Answer 1

Try this – DEMO

HTML

<div class="photo">
    <img src="image_file.jpg">
    <p>Caption for the image file which might be long</p>
</div>

CSS

div.photo {
    margin: 10px;
    float: left;
    clear: left;
    position: relative;
    background: honeydew;
}

div.photo img {
    max-width: 500px;
    min-width: 150px;
    margin: 8px;
}


div.photo p {
    position: absolute;
    bottom: 12px;
    left: 10px;
    right: 8px;
    background: rgba(0, 0, 0, .4);
    color: #fff;
}