Question

I am trying to have some images inside a div. Only one image should be shown. I use:

<div id="slideshow" style="width:600px;height:400px;position:absolute;overflow:hidden;"></div>
<img src="img3.png" width="600px" height="400px" id="img3" style="position:absolute;left:0px;">
<img src="img2.png" width="600px" height="400px" id="img2" style="position:absolute;left:600px;">
<img src="img1.png" width="600px" height="400px" id="img1"     style="position:absolute;left:1200px;">
</div>

But the images overflow from the div and are visible. How do I fix this?

Answer 1

Let’s start by fixing your markup…

<style>
#slideshow{
    width:600px;
    height:400px;
    position:absolute;
    overflow:hidden;
}

#slideshow img{
    width:600px;
    height:400px;
    float:left;
}
</style>

<div id="slideshow">
    <img src="img3.png" id="img3">
    <img src="img2.png" id="img2">
    <img src="img1.png" id="img1">
</div>

So the reason why is because you defined position:absolute in both the parent and the children. You could have wrapped the image tags in a relatively positioned div. That would reset the absolute position to the top left of the relative positioned parent.

However, in this case, all you needed to do was float left. There was no reason to have absolute positioned children in the slideshow element.