Question

My Css

#container{
    display:block;
}

#container ul{
    list-style:none;
    position:relative;
    margin:0px;
    padding:0px;
    display:block;
}

#container li{
    list-style:none;
    margin:0px;
    padding:0px;
    position:absolute;
    top:0;
    left:0;
}

#container img{
    margin:0px;
    padding:0px;
}

my HTML

<div id="container">
<ul>
<li><img src="1.jpg" alt="" /></li>
<li><img src="2.jpg" alt="" /></li>
<li><img src="3.jpg" alt="" /></li>
<li><img src="4.jpg" alt="" /></li>
</ul>
</div>

all the pictures rendered under each other which is what I want but the problem is that if I add any div after #container it will inserted behind it, I want to insert some divs after it but every time I add another div it goes behind it, how can i solve that?

Thanks

Answer 1

You can fix this by setting the height and width on #container ul. That is what I’ve done when making a photo rotator, since the image sizes are usually known ahead of time.