Sovrapporre immagini in un div

[Alhazred]

La struttura della pagina è questa:

<div id="container">
	<div id="header"> </div>
	<div id="menu"> </div>
	<div id="content">
            [img]images/a1.jpg[/img]
            [img]images/a2.jpg[/img]
            [img]images/b1.jpg[/img]
            [img]images/b2.jpg[/img]
            [img]images/c1.jpg[/img]
            [img]images/c2.jpg[/img]
        </div>
	<div id="footer"> </div>
</div>

si tratta di un layout con un'unica colonna, tutti i div sono posizionati uno sotto l'altro, tranne ovviamente il container che li contiene tutti.
Il div container è posizionato orizzontalmente al centro della pagina mediante attributo margin:auto e spaziato dalla parte alta della pagina con padding-top:50 nella definizione del body.

La mia necessità è questa:
ho 3 coppie di immagini delle stesse dimensioni, devo metterle tutte nel div "content" in modo che se ne vedano 3 affiancate, quindi sotto ognuna ce ne deve essere un'altra in secondo piano, quindi ad esempio a1 deve coprire a2, b1 deve coprire b2 e c1 deve coprire c2.
Il problema è che non posso posizionare le immagini in modo assoluto, perché se cambia la risoluzione del monitor le posizioni non sono più giuste.

Come faccio ad affiancarle dentro il div "content" ovunque esso venga visualizzato?

Se avessi solo 3 immagini da affiancare non avrei problemi, il problema sono le immagini che devono occupare la stessa posizione di quelle a cui si devono sovrapporre.

[Alhazred]

Come non detto, sembra che ci sia riuscito.

[Alhazred]

Come non detto... di nuovo, funziona solo con Firefox.

IE8 e Opera: quando l'immagine in primo piano viene fatta sparire c'è un movimento dei div

Chrome e Safari: le immagini non vengono proprio sovrapposte, vengono disposte su due righe differenti.

Ciò che ho ora è questo:

<div id="container">
    <?php include("header.html") ?>
    <?php include("menu.html") ?>
    <div id="content_prod">
        <div class="fadehover">
            <div class="cover">
                [url="#"][img]images/cover/a1.jpg[/img][/url]
                [url="#"][img]images/cover/a2.jpg[/img][/url]
            </div>
            <div class="cover">
                [url="#"][img]images/cover/b1.jpg[/img][/url]
                [url="#"][img]images/cover/b2.jpg[/img][/url]
            </div>
            <div class="cover">
                [url="#"][img]images/cover/c1.jpg[/img][/url]
                [url="#"][img]images/cover/c2.jpg[/img][/url]
            </div>
        </div>
    </div>
    <?php include("footer.html") ?>
</div>

div#container {
    width: 920px;
    margin: 0px auto;
    background-color: #DBCA00;
    text-align: left;
}

div#content_prod {
    background-color: #fff;
    height: 400px;
}

.fadehover {
    position: relative;
}

.cover {
    float: left;
}

.sopra {
    position: absolute;
    margin-top:0;
    margin-left:-306px; //larghezza della prima immagine, perché mi apparivano
                        //sovrapporsi a partiredalla seconda immagine
    z-index: 10;
}

img {
    border-style: none;
} 

Come si fa a sovrapporre queste immagini?

[Alhazred]

Vabbè, stavolta penso che ci siamo, mi ostinavo a voler mettere le immagini per conto loro.
Ho risolto mettendo un'immagine come sfondo del div contenente l'immagine che doveva coprirla.
In questo modo ho solo dovuto affiancare 3 div.