[css] Allineamento DIV: come perdere le giornate

[maz85]

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:

<div class="contenitore">...</div>
<div class="div_img_sopra">...</div>

CSS:

.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:

<div class="contenitore">...</div>
<div class="div_img_sopra">...</div>

CSS:

.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?

[ttcc]

di solito con i position si hanno tre alternative: relative, absolute e fixed.
credo che nel tuo caso (se ho capito bene) possa essere "fixed". senza nessun position per il contenitore.

[maz85]

Grazie per la risposta.

Nel frattempo visto che mi serviva lo spazio a sinistra del container ho risolto mettendo un
margin-left fisso (più o meno della grandezza dell'img del div "fluttuante") così il div_img_sopra non va ad intaccare il contenuto del contenitore, ma una parte di esso lo copre.

Così viene letto correttamente anche dal vecchissimo IE7.