Sovrapporre div a un altro

[Nikit]

Salve,
io ho una pagina html con un div contenitore principale largo 900px.
Poi ho, al suo interno, due contenitori div che contegono rispettivamente:

- una immagine PNG
- 5 div ognuno contenente una immagine

Il codice html è questo:

<div id="gallerybb">
				<div id="colline">
				</div>
				<div id="gall">
					<div id="bringin">
					
					</div>
					<div id="angelamasino">
					
					</div>
					<div id="camilla">
					
					</div>
					<div id="soleluna">
					
					</div>
					<div id="meridiana">
					
				</div>
				</div>
			</div>

mentre il css è questo:

#gallerybb{
text-align:center;
padding:0;
margin:0;
float:left;
height:267px;
width:900px;
background:#572a4b;
}
#gall{
margin-top:-190px;
float:left;
z-index:1;
}
#colline{
float:left;
position:relative;
z-index:3;
padding:0;
margin-top:150px;
width:887px;
height:69px;
background: url(images/colline.png);
}
#bringin{
margin:1px;
border:1px solid #aea010;
float:left;
height:151px;
width:151px;
background: url(images/fotobb/1bn.jpg);
}
#angelamasino{
margin:1px;
border:1px solid #aea010;
float:left;
height:151px;
width:151px;
background: url(images/fotobb/2bn.jpg);
}
#camilla{
margin:1px;
border:1px solid #aea010;
float:left;
height:151px;
width:151px;
background: url(images/fotobb/3bn.jpg);
}
#soleluna{
margin:1px;
border:1px solid #aea010;
float:left;
height:151px;
width:151px;
background: url(images/fotobb/4bn.jpg);
}
#meridiana{
margin:1px;
border:1px solid #aea010;
float:left;
height:151px;
width:151px;
background: url(images/fotobb/5bn.jpg);
}
/*--------------------------------*/
/*Links gallery*/
/*--------------------------------*/
/*----------------------*/
/*Cascina Bringin*/
/*----------------------*/
#gallerybb a.button1{
border:0;
display:block;
width:151px;
height:151px;
margin:0;
padding:0;
font:helvetica,verdana,sans-serif;
text-align:center;
text-decoration:none;
color:#572a4b;
background: url(images/1.jpg) no-repeat 0 0
}

#gallerybb a.button1:hover{
background-position:0 -151px;
color:#fff;
}
/*----------------------*/
/*Angela e Masino*/
/*----------------------*/
#gallerybb a.button2{
border:0;
display:block;
width:151px;
height:151px;
margin:0;
padding:0;
font:helvetica,verdana,sans-serif;
text-align:center;
text-decoration:none;
color:#286C98;
background: url(images/2.jpg) no-repeat 0 0
}

#gallerybb a.button2:hover{
background-position:0 -151px;
color:#fff;
}
/*----------------------*/
/*Casa Camilla*/
/*----------------------*/
#gallerybb a.button3{
border:0;
display:block;
width:151px;
height:151px;
margin:0;
padding:0;
font:helvetica,verdana,sans-serif;
text-align:center;
text-decoration:none;
color:#286C98;
background: url(images/3.jpg) no-repeat 0 0
}

#gallerybb a.button3:hover{
background-position:0 -151px;
color:#fff;
}
/*----------------------*/
/*SoleLuna*/
/*----------------------*/
#gallerybb a.button4{
border:0;
display:block;
width:151px;
height:151px;
margin:0;
padding:0;
font:helvetica,verdana,sans-serif;
text-align:center;
text-decoration:none;
color:#286C98;
background: url(images/4.jpg) no-repeat 0 0
}

#gallerybb a.button4:hover{
background-position:0 -151px;
color:#fff;
}
/*----------------------*/
/*Angela e Masino*/
/*----------------------*/
#gallerybb a.button5{
border:0;
display:block;
width:151px;
height:151px;
margin:0;
padding:0;
font:helvetica,verdana,sans-serif;
text-align:center;
text-decoration:none;
color:#286C98;
background: url(images/5.jpg) no-repeat 0 0
}

#gallerybb a.button5:hover{
background-position:0 -151px;
color:#fff;
}

Ora.. vorrei che le 5 immagini fossero centrate e che colline.PNG fosse SOPRA le altre immagini.

Come posso fare?

IE 6, 7 e FF si comportano spesso diversamente e ci sto impazzendo da 3 ore.

[Mich_]

Il crossposting e` viatato, come pure postare due volte lo stesso problema.
vedi http://forum.html.it/forum/showthrea...readid=1293853
Questa la chiudo