DIV all'interno di DIV's

[jumborex]

Sto ricostruendo un sito vecchio stile, utilizzando solo DIVs, niente tabelle, css eccetera.
Non riesco tuttavia a capire perché se utilizzo div dentro div, dentro div, quello più esterno non sempre comprende il contenuto di tutti gli altri.
Si veda per esempio:questa pagina in cui la struttura più esterna finisce a metà dell'immagine e non so capire come mai!
La struttura della pagina è più o meno la seguente:

    <div class="container">
        <div class="contentBright">
        <div id="quadrati">

        <div class="ContieneMenu">
          <div class="BoxStandard">          
            

</p>
          </div> 
          <div class="BoxDescrivi">          
            
          </div> 
          <div class="BoxStandard">          
            

</p>
          </div> 
        </div> 
        

        <div class="presentationBright"> 
        <div class="ContieneMenuBasso">
          <div class="BoxStandard" style="width:286px">
          

</p>
          </div> 
          <div class="BoxDescrivi" style="width:401px">
            
          </div> 
          <div class="BoxStandard">    
            
          </div> 
        </div> 
        </div> 
        </div> 
            
        </div> 
    </div> 

Tutti i contenitori che iniziano con Box hanno l'opzione floating:left, nel punto dove questa opzione è anullata lo si dice nell'esempio, che del resto rispetta fedelmente il contenuto della pagina d'esempio.
Mi sfugge qualche cosa: ovviamente, se mettessi un height:610px su quadrati la pagina viene benissimo. Apparentemente il tutto assume uan dimensione in altezza del tutto casuale. O per lo meno per me incomprensibile.
Grazie a chi saprà spiegarmelo.

[Mich_]

Attenzione che i blocchi flottati escono dal flusso dei blocchi non flottati.
Sono come un'entita` a parte (un po' come i blocchi posizionati escono dal flusso dei blocchi con posizionamento statico).
Per far rientrare i blocchi flottati nel flusso, occorre inserire un clear, in un blocco successivo a quelli floattati (o un un blocco virtuale :after, come consigliato da fcaldera nella ]sua pillola)

[jumborex]

Interessante, ma non mi funziona, come dovrebbe comunque vedersi alla solita pagina.
Ho inserito nel mio css (seguendo pedissequamente quanto suggerito) il seguente:

.cleared:after {
	display	: block; 
	visibility : hidden;
	content: "."; 
	height: 0; 
	clear: both;
} 
.cleared {
         clear: both; /* per Gecko */
         height: 1%; /* per IE */
}

Poi, se ho capito bene, ho provato a inserire la classe cleared nei blocchi che contenevano i floating. Per esempio:

<div class="contentBright cleared">

oppure:

<div class="cleared" id="quadrati">

o anche in entrambi i posti: si dovrebbe notare che i due blocchi sono uno dentro l'altro e servono a produrre un effetto di sfondi uno sull'altro. I due blocchi contengono tutto il resto della pagina, più o meno.
I risultati non sembrano significativi: qualcosa di sbagliato?

[Mich_]

Ci sono un po' di problemi in quella pagina.
- c'e` troppo JS per i miei gusti (in qualche caso puo` interferire anche con il CSS)
- ci sono formattazioni HTML (che vanno in contrasto con le formattazioni CSS)
- ci sono errori di sintassi (link non corretti secondo le regole)
- non riesco a vedere il file CSS (forse e` un errore di maiuscole/minuscole), e quindi non posso vedere se il clear e` impostato in modo corretto.

Inoltre non mi piace il CSS dentro l'HTML che a sua volta chiama un file esterno: e` meglio chiamare direttametne un file esterno, con il tag <link>.

[jumborex]

Originariamente inviato da Mich_
Ci sono un po' di problemi in quella pagina.
- c'e` troppo JS per i miei gusti (in qualche caso puo` interferire anche con il CSS)
- ci sono formattazioni HTML (che vanno in contrasto con le formattazioni CSS)
- ci sono errori di sintassi (link non corretti secondo le regole)
[...]
Inoltre non mi piace il CSS dentro l'HTML che a sua volta chiama un file esterno: e` meglio chiamare direttametne un file esterno, con il tag <link>.

Beh, grazie comuqnue della segnalazione: gli errori di sintassi in realtà erano solo dovuti alla mia (colpevole? :rollo: ) abitudine di segnare il fine commento con ---> invece del previsto -->
Inoltre come avevi giustamente previsto, c'era un <A invece di <a e un HREF invece di href.
Una volta eliminati questi (gravi) errori, la pagina di validazione w3c mi riferisce:

This Page Is Valid XHTML 1.0 Transitional!

Il che è una bella cosa, lo ammetto. Oltretutto da farsi. In verità non avevo badato tanto a queste sottigliezze, ma lo riconosco: sbaglio io!
In effetti adesso la pagina appare buona in IE e in Firefox, Opera e Safari: tutti quelli che posso testare direttamente.
La domanda sorge spontanea: come mai degli errori che io giudicavo cosmetici pregiudicavano il buon risultato di una pagina?

Anche se, passando il mouse sul JS di navigazione, in alto, la pagina presenta delle contrazioni difficili da spiegare.
Insomma, credo ci sia ancora qualche cosa da spiegare...

[Mich_]

La domanda sorge spontanea: come mai degli errori che io giudicavo cosmetici pregiudicavano il buon risultato di una pagina?

Non erano tanto cosmetici: alcuni browser sono sensibili alla sintassi, altri lascia no correre un po' troppo.
E comunque fare le cose bene aiuta.

Ancora non riesco a visualizzare il CSS, mentre il browser lo vede: ci dev'essere ancora qualche errore nel nome del file CSS o nel modo in cui e` richiamato: la cosa non e` "cosmetica", perche` qualche browser potrebbe non vedere il CSS.

Anche se, passando il mouse sul JS di navigazione, in alto, la pagina presenta delle contrazioni difficili da spiegare.

Io non vedo "contrazioni", anche se il mio Konqueror non vede il menu che si apre (mentre lo vede FF): potresti realizzare un menu uguale usando solo CSS: vedi se qualcuno dei menu pronti (puoi partire dai collegamenti nei "link utili") ti puo` servire.

Insomma, credo ci sia ancora qualche cosa da spiegare...

Anche da sistemare.
Ecco come viene vista la tua pagina nel mio browser: c'e` uno scroll orizzontale (che non e` giustificato dalle dimensioni e dal contenuto), e ci sono probelmi coni "bottoni" (probabilmente hai usato dimensioni in px, anziche` em, o hai usato una imamgine fissa senza dimensionare coerentemente il blocco in cui e` inserita).