multiple <div>'s on top of each other

[humpingdan]

basically i want three images to load when my index.htm first appears,
image1.jpg
image2.jpg
image3.jpg

but the only visible image be image1.jpg, where the other two images are behind it, i can do this as follows, using the z-index putting image2.jpg 'behind' image1.jpg, easy!

.over { position: absolute; width: 100px; height: 100px;
z-index: 2; background: url("image1.jpg");
}
.under { position: absolute; width: 100px; height: 100px;
z-index: 1; background: url("image2.jpg");
}

<p class="over"></SPAN>
<p class="under"></SPAN>

BUT....
I have a centred layout, using margin-left/right auto,
so the header div where i want these images kept automtically centres itself to the page width, but seen as with the above coding the images are positioned: absoloute they dont stay centred to the header div,

has anybody got any alternative methods for this to take place?

[BlobFisk]

Why not use a containing <div> to control your content centering, and nest the other <div>'s inside that?

[humpingdan]

can anyone outline as to how i might do this?

just roughly!

[BlobFisk]

<div id="centeredDiv"> 
 <div id="nestedDiv"> 
 <!-- This Layer is nested within the top one --> 
 <!-- It's top and left coordinates are inherited --> 
 <!-- from the parent div, which means that its --> 
 <!-- top and left are from the top left corner --> 
 <!-- of the parent div --> 
 </div> 
 <div id="nestedDiv"> 
 <!-- As does this one --> 
 </div> 
</div> 

HTH