Layering pictures in HTML, one above the other

I am currently using this technique for my homepage. First you add the following in CSS:

1
2
3
.box450 {width: 800px; margin: 0 auto; border: 00px #000 solid;}
.box451 {width: 800px; height: 1px; margin: 0 auto; border: 00px #000 solid;}
img {display: block;}

Now, let us come to the HTML body part. Put the images as follows:

1
2
3
4
5
6
7
8
<div class="box450">
<div class="box451"><img style="position: relative; z-index: 10;" src="&lt;em&gt;url of 1st pic&lt;/em&gt;" alt="Faline 1" width="225" height="219" border="0" /></div>
</div>
</div>
<div class="box451">
<img src="url of 2nd pic" width="250" height="372" border="0" alt="Faline 2" style="position: relative; top:-209px; left:100px;">
</div>
</div>

The inner div (box 451) is not necessary. However the page length increases as you add more pictures. Adding the inner div removes unnecessary addition of space in page height.

The first pic in the div (box 450) will always be at the top. The last pic in the div will always be at the bottom.