CODEWITHSUNDEEP
css
Himmators
Himmators

Reputation: 15006

Is there an alternative to negative margins for item overlaying other item in css?

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)

Upvotes: 0

Views: 3385

Answers (5)

Himmators
Himmators

Reputation: 15006

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!

Upvotes: 0

Mat Richardson
Mat Richardson

Reputation: 3606

Another alternative would be to use a fixed-size div and use your image as it's background? That way any text would be overlaid without any need to mess around with absolute and relative positioning. Mat

Upvotes: 0

green_arrow
green_arrow

Reputation: 1277

Have you thought about absolute positioning the items inside a div which is relatively positioned?

For example, wrap the p and img in a div and add position:relative to the div then add position:absolute to the p and the img and left or right position those elements.

Upvotes: 1

Dave Haigh
Dave Haigh

Reputation: 4547

I would wrap the p and img in a div. 

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

then use the below styling:

div {
  position: relative;
  float:left;
}
p {
  position: absolute;
  top: 20px;
  left: 10px;
}

you can adjust the top and left values accordingly and also use bottom or right instead of top and left if you wish.

Upvotes: 0

Simeon Visser
Simeon Visser

Reputation: 122376

Put a div around it:

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

Specify the width of the div and allow the img to be on top of the p. You can then use padding: 0 auto; on the div to center the image.

Upvotes: 0

Related Questions