Div size with relative content - html

Question

I have a div with some images inside:
<div>
<img><img><img><img>
<div>
The images would normally display in a row, however I have used some CSS to change their relative positions from left (-7px for the second one, -14px for the third, etc.) so they are stacked partially over each other. Is there a way to make the div to be only the width of the partially stacked images, rather than the width of where the images would be if they weren't moved?

Answer 1

If the content isn't dynamically generated then you can just manually set the div to the width you want using css.
<div class="overlap">
<img><img><img>
</div>
.overlap {
width: 200px;
}

Answer 2

If you set the css as
div img {position: absolute;}
they will all overlap without needing any repositioning.
It will set the size of the img, and div to 0 so it will only work if there is nothing below it on the page.

Answer 3

To center the images try wrapping them in another div. Not sure what you have in all of your css but you can get the idea anyway. Something Like:
.overlap{
width:200px;
outline:1px solid red;
position:relative;
}
.overlap img{
outline:1px solid blue;
display:block;
height:50px;
width:25px;
position:relative;
float:right;
}
.overlap img{
left:-7px;
}
.overlap img + img{
left:-14px;
}
.overlap img + img + img{
left:-21px;
}
#center{
width:100px;
margin:0px auto;
}
<div class="overlap">
<div id="center">
<img><img><img>
</div>
</div>