Originariamente inviato da Jerry Masslo
sembra funzionare a dovere, a parte forse che ridimensionando con ie e mozilla parte del titolo s'infila sotto il livello sottostante.

Curiosità:
perché

div#contenitore div#header {

invece di

#header {

?

Il titolo si "infila sotto" perchè eccede la larghezza del testo, non ho fatto prove in tal senso, probabilmente dando un'altezza minima anche al titolo o definendolo come display: block si risolve il problema, poi vedrò ....


Perchè div#eccetera invece che....
definire un layer invece che un identificatore generico serve a impedire che la classe #contenitore venga associata a qualcosa di diverso che un layer.
E dato che volevo implementare una dipendenza tra contenitore e header, ho preferito "essere chiaro"
Spesso vedo qui fogli di stile che non utilizzano questa tecnica, per la massima parte dei casi vanno bene, ma io volevo che header fosse parte integrante di contenitore, questo per poter sfruttare il posizionamento assoluto all'interno di contenitore.

Ogni cosa in un foglio di stile è figlia della precedente questo vuol dire che, se uso body { ... } e poi #contenitore { ... } e infine #header { ... } svincolandoli, in realtà sono tutti figli di body e poi mi creo problemi per posizionare i vari elementi e farli stare incollati tra loro se ridimensiono la finestra.
Se non faccio così mi si creerà un problema con il posizionamento dinamico, ho visto che molti qui cadono sempre nella stessa trappola.

Definire div#contenitore significa che l'identificatore #contenitore può essere sempre e solo un layer.
Definendo solo #contenitore in realtà creo qualcosa di generico, funziona, però in questo modo essa non viene associata solo ad un layer ma a qualsiasi altro elemento.
Quindi io specifico: div#contenitore e può essere associato solo e soltanto ad un layer.

I layer nidificati, e pochi topic fa ho notato che qualcuno chiedeva se si poteva fare, servono a definire dei figli di padri, pensate alla programmazione a oggetti.
Quindi div#contenitore div#header definisce un elemento, header, che può essere solo figlio di contenitore e ne eredita tutte le caratteristiche comuni, in più ne aggiunge delle altre.
Ad esempio posso tranquillamente definire del testo (font-family, eccetera) in contenitore, e questo sarà ereditato da tutti i suoi figli, nipoti e pronipoti.
Per esempio: div#contenitore div#form p { .. } se in contenitore mettevo font-family: verdana, p (paragrafo) ereditava quel font senza doverlo ridefinire di nuovo.
Se invece facevo: div#contenitore {font-family: verdana} e poi a parte div#form p { ... } questo non ereditava più il verdana e dovevo reinserirlo di nuovo.

Non so se sono stato chiaro.

Per piero: nessuno ti vuole convincere, ma ostinarsi ad usare il pennino e il calamaio per scrivere, quando esiste la biro da tanto tempo, questo non l'ho capito.