Question

i have a markup like this:

<p>Image caption</p><img />

the p is an inline block.

I want the caption to overlay the image, rather than pushing the image to the left. Ususally I do this with margin-right -“x”px;, but as I don’t know what width the image caption will have, I can’t use this technique. Are there any good alternatives? (the text has a background color, so I cant’ use block-elemnt)

Answer 1

The solutions written here were not possible for my site (although technically correct)

My solution was

<p>
    <span>Image caption<span>
</p>
<img />

and then

p{
    display:block;
    margin-right -100%;
}

some extra markup but hopefully it will help someone walking down the same path as I did!