div contenitore che non si espande verticalmente in FF

[carlo2002]

vorrei racchiudere tutti i div in uno unico, il classico 'contenitore', oltre che per centrarlo (già fatto) per avere un contorno di 1px che racchiude il tutto.

body {
text-align: center ;
margin: 5px 0px 0px 0px ;
font-family: arial,Verdana,Helvetica,courier,sans-serif ;
}

div#contenitore{
border: 1px solid #808080 ;
width: 770px ;
background: #ffffff ;
margin: 0 auto ;
}

in IE il contorno racchiude tutto mentre in FF no.

come mai?

[Mich_]

Non ha molto senso dare dei margini al body: il body occupa per definizione tutta la finestra.
Invece va bene inserire il text-align, per centrare in IE quanto contiene.

Pero` se vuoi far riferimento alle dimensioni del body, devi definrne le dimensioni: in pratica devi inserire nel body:
width: 100%;
height: 100%;
Tali dimensioni vanno assegnate anceh all'html (sempre per evitrare che qualche browser interpreti in modo diverso da quanto vorresti).

[webus]

Originariamente inviato da Mich_
Non ha molto senso dare dei margini al body: il body occupa per definizione tutta la finestra.

Mich_ , non sono molto d'accordo.

Firefox e Safari ad esempio gli assegnano di default uno spazio di qualche pixel di margine. Dovrai settare margin:0 per eliminarlo, sopratutto se vuoi una width:100% o ti apparirà la scrollbar. Non ricordo con sicurezza per Explorer, ma mi pare di no.

[carlo2002]

ok, ho risolto così, però gradivo avere un po' spazio in fondo alla pagina e ho messo il padding: 5px nel body, ma su FF non me li dà:master:

html {
height: 100% ;
}

body {
text-align: center ;
height: 100% ;
padding: 5px 0px 5px 0px ;
}

div#contenitore{
border: 1px solid #808080 ;
width: 770px ;
height: 100% ;
margin: 0 auto ;
padding: 0px ;
}

[carlo2002]

riguardo alla scrollbar verticale ho impostato margin: 0 sia in html sia in body, purtroppo rimane sia in FF sia in IE nche azzerando tutti i padding.

[serialkiller]

al div contenitore, metti height: 99%; e risolvi

[webus]

Originariamente inviato da carlo2002
riguardo alla scrollbar verticale ho impostato margin: 0 sia in html sia in body, purtroppo rimane sia in FF sia in IE nche azzerando tutti i padding.

hai meso un qualche border?

facendo la somma:
margin:0 (assegnato) +
border: 0 (default) +
height:100% (assegnato) +
padding: 0 (assegnato) =

totale altezza 100% (NON dovresti avere alcuna scrollbar).

[carlo2002]

Originariamente inviato da webus
hai meso un qualche border?

facendo la somma:
margin:0 (assegnato) +
border: 0 (default) +
height:100% (assegnato) +
padding: 0 (assegnato) =

totale altezza 100% (NON dovresti avere alcuna scrollbar).

si, il div 'contenitore' ha border: 1 ed in pratica la scrollbar compariva pe quei due pixel,
mettendolo a zero la situazione peggiorava, allora ho provato ad azzerare tutti i border margin padding dei div 'contenitore','body' e 'html' e la situazione è sempre negativa.
Allora ho tolto height:100% ai div 'html' e 'body' e finalmente la scrollbar scompare ma quelli mi
servivano affinchè il div 'contenitore' potesse avere un contorno che mi incorniciava tutti i suoi contenuti, quindi sono punto e a capo.

Però anche tralasciando la scrollbar (a questo punto pazienza) se imposto il div 'contenitore' al 100% questo mi assume l'altezza del body e li si ferma, se al suo interno ci sono dei contenuti che superano quell'altezza non si espande in altezza contenendoli ma viene tranciato.

alla fine:

si riesce o no con questi benedetti CSS a fare un semplice contorno di un pixel a dei contenuti?

(naturalmente il discorso vale per FF, in questo caso quella baracca di IE non sembra dare problemi)

[Mich_]

Prova ad abbandonare la definizione dell'altezza, e mettici invece top e bottom (ambedue).

[carlo2002]

La discussione ha preso una piega non voluta ossia espandere un div al 100% dell'altezza della pagina, invece mi serviva sapere come espandere un div in altezza affinchè contenga tutto ciò che ha all'interno.

L'errore è stato causato da me in quanto non ho specificato che all'interno del div 'contenitore' ci sono dei div flottanti e mentre IE si espande (neanche tanto bene), FF non lo fa (a quanto sembra questo è un comportamento corretto).

La soluzione, a discapito di una struttura xhtml perfetta (l'esigenza lo giustifica), è l'inserimento di un div vuoto da inserire in fondo al div che si deve espandere.

ecco come ho risolto,

div.clear {
clear: both ;
height: 0 ;
overflow: hidden ;
}

<div class="clear"></div>