Ragazzi salve,
ho bisogno di un consiglio.

Allora poniamo che in una pagina web ci sia un DIV centrato e mi serva mettere un'immagine/div che "fluttua" alla sua sinistra andandoci un po' sopra.

HTML:
codice:
<div class="contenitore">...</div>
<div class="div_img_sopra">...</div>
CSS:
codice:
.contenitore{
	position: relative;
  	margin-left: auto;
  	margin-right: auto;
        width: 800px;
}

.div_img_sopra{
	position: absolute;
	background-image: url(ciao.png);
	width: 300px;
	height: 300px;
	left: 0px;
	top: 260px;
}
In questa maniera il div "div_img_sopra" sta correttamente al suo posto, peccato
che quando l'utente rimpicciolisce la finestra del browser, questa va sopra al contenuto del div "principale". Ok, è normale.

Allora ho provato a rendere la posizione "div_img_sopra" RELATIVA e ho inserito questo div all'interno del div "principale":

HTML:
codice:
<div class="contenitore">...</div>
<div class="div_img_sopra">...</div>
CSS:
codice:
.contenitore{
	position: relative;
  	margin-left: auto;
  	margin-right: auto;
        width: 800px;
}

.div_img_sopra{
	position: relative;
	background-image: url(ciao.png);
	width: 300px;
	height: 300px;
	left: 0px;
	top: 260px;
}
e sembra tutto perfetto, infatti il div con l'immagine ciao.png viene posizionato a posizione-div-contenitore e in base alle proprietà left e top impostate.
Provando con IE7 la lettura del css viene interpretata in maniera diversa, vabbè... facciamo finta di nulla che devo ancora provare su IE8.
Il problema ora invece è che il div_img_sopra nel div contenitore gli fa spostare tutto il contenuto (zona grigia immagine sotto).

Ecco un'immagine esplicativa:

Il contenuto nella zona segnata in grigio viene spostato sotto o a sinistra se sul div_img_sopra metto float:left

Ora io vorrei:
- che il div_img_sopra si posizionasse RELATIVAMENTE al contenitore
- che non faccia spostare il contenuto del contenitore

Soluzioni?