Div sobre Div!

Salve rapaziada...

To com uma dúvida sobre CSS e posicionamento de divs...

To desenvolvendo um site todo em tableless usando divs porém to apanhando de uma situação....

Em determinada parte do site tenho uma div chamada: fotos que ocupa 100% da tela, segue abaixo o style:

#fotos{
 height:auto;
 width:auto;
 margin-top:3px;
 padding-left:135px;
 background-color: #000000;
}

So que quero colocar outra div flutuando sobre ela no lado direito, chameia de barralateral, olha ae o style:

#barralateraldireita {
 background:#FFFFFF;
 position: relative;
 z-index: 1;
 top:-436px;
 left:-140px;
 width:400px;
 height:380px;
 float:right;
}

Fica show de bola com a tela inteira.... porém quando minimizo a tela a div barralateral cobre aos poucos a div fotos!!!

E quando adiciono conteudo na div fotos a div barralateral sai do lugar conforme o texto vai sendo digitado!!!!

Dae vem as dúvidas:

1. Como evitar o overlap entre elas?

2. Como posicionar definitivamente a div barralateral ?

Vou postar um link para vocês verem o erro!

http://www.admonline.com.br/admonline/teste/index_teste2.asp

O código completo ta no link tb:

http://www.admonline.com.br/admonline/teste/codigo.txt

Vlw!