Problema di margin con div dentro un altro div

[Fix87]

Sto cominciando a studiare l'HTML+CSS e sto provando a creare un mini sito in modo da fare pratica con l'HTML e il CSS.

Questo mini sito è composto da 4 pagine e principalmente è strutturato così:
un div contenitore che contiene:
1) un div testata con il titolo della pagina;
2) un div menu con appunto il menu di navigazione;
3) un div corpo con dentro le informazioni relative ad ogni pagina;

1) e 2) rimangono sempre uguali ad ogni pagina.

Ora il problema è nel div id="corpo" della pagina contatti.

Praticamente in questa pagina creo un div all'interno del div corpo e quando vado a inserire il top-margin del div piccolo, tutto il corpo vine giù di quanti pixel ho inserito nel top-margin del div piccolo ( scusate il gioco di parole).

Vi posto il codice per farvi capire meglio:

HTML:

<div id="corpo">
   <div id="form">
   </div>
</div>

CSS:

#corpo{background:#484848; margin-top:10px; height: 360px; border-radius:10px;}
#form{width:50px; height:50px; border:1px solid #FFF; margin:0px auto;}

Ora se all'interno del comando #form{} vado a modificare il valore margin:30px auto; anche il div corpo scende di 30 px, come mai???

[mahamatt]

È sufficiente che aggiungi overflow:hidden alle istruzioni css del div #corpo!

[Fix87]

Graaaandeeee ho provato a leggere sul sito w3c che cosa facesse esattamente l'overflow ma non ci ho capito granchè c'è per caso una buona guida tipo quella del sito ufficiale w3c in italiano?

[mahamatt]

In realtà il comportamento della proprietà overflow è un po' "strano", e sinceramente non sarei in grado di spiegare del tutto la logica dietro ai suoi effetti.
Ad esempio, dare overflow:hidden a un elemento contenitore (con height non dichiarata) è l'unico modo per adattarne l'altezza a eventuali elementi flottanti contenuti all'interno.

Per le guida non saprei, io ho imparato i css tanti anni fa proprio dai tutorial di html.it, comunque in giro per la rete si trova un sacco di materiale valido!

[Fix87]

Si infatti dopo che mi hai dato tu il consiglio, ho risolto anche con il float, oppure ora stavo cercando di capire se potevo usare il position:relative. Nelle altre pagine che ho fatto pure ho messo altri div all'interno del div "corpo" ma ho usato la funzione float perchè era più di un div.

Cmq grazie mille per l'aiuto come sempre forum validissimo

[mahamatt]

Come sempre, si dà e si riceve buon lavoro!