altezza fissa del container

[silvia.c]

Ciao a tutti.

Ho già scritto in merito a questo, ho fatto altri test e ho identificato il problema ma purtroppo non ho la soluzione.


http://www.4artweb.com/testing/test.htm

Il problema che si verifica con explorer è questo:

ho un container con altezza definita a 300px.
ho un box rosso che voglio sia alto 390px e che sbordi sopra (top:-70px e sotto di quello che resta (10px)

Il codice molto semplice è:

<div id="container">

<div style="position:relative; top:-70px; width:248px; background-color:red; float:right;">
[img]images/PixelProva.gif[/img]
</div>

</div>


il css è così:


body
{
width: 90%;
margin-left: 50px;
text-align:center;

}

div#container
{
width:580px;
height:300px;
border:2px solid #339933;
margin-top: 110px;
margin-right: auto;
margin-left: auto;
text-align:left;
background-color: #F8EEC9;

}


perchè se il box rosso supera i 300px (altezza del container) anche il container si allunga? Non può starsene lì fermo?

Qualcuno mi sa dare una mano?

Grazieeee!!
ciao
silvia

[awd]

IE fa così! interpreta male height!
la cosa che devi fare è definire uno z-index in modo da posizionare il secondo div su un livello superiore.

però non so se abbia senso chiamare il div "container" se poi il contenuto esce. ma questo è un mio pensiero personale

[silvia.c]

... purtroppo non funziona nemmeno lo z-index... ho impostato sul container z-index:1; e sul box rosso z-index:2; ma niente.

Il container si chiama così perchè è cmq il contenitore di tutto... anche se il box esce deve stare relazionato al contenitore per mantenere un layout stabile e fluido con qualsiasi risoluzione.

Tu avresti fatto diversamente? Lo sapevo che IE interpreta male le altezze ma non credevo così tanto! Possibile che non c'è niente che lo annienti?? :master:

porcaccia!!!!

[awd]

perché non usi il posizionamento assoluto? secondo me è più indicato del relativo

[silvia.c]

sembrerebbe risolto!!!!
ho duplicato il container chiamandolo "base" (la parte gialla) mentre il container è rimasto un semplice contenitore.

Poi ho messo margin-top: invece di top: e tutto si è risolto!!!

Incredibile!!

che meraviglioso modo di finire la settimana!!!!
ciaoo!!