Inserire un top margin per contenutore figlio lasciando inalterata la posizione del padre

**American** · 03-01-2014, 16:06

La mia intenzione è quella di creare una struttura del genere

esempio.jpg

dove il box rosso abbia un margin-top di 100px.

Ho stilizato il css in questo modo

#cont{
width:500px;
height:auto;
background-color:#06F;
}

#sub{
background-color:red;
width:300px;
height:1000px;
margin-top: 1000px
}

e sebbene in Dremaweaver il risultato è proprio quello sperato, quando vado a renderizzarlo nel browser mi accorgo che il margin-top non viene applicato solo al box rosso, ma a tutta la struttura compreso il box blu
Guardate voi stessi
americanhorizon.altervista.org/portfolio/prova.html

La cosa mi appare strana perchè va contro tutto quello che ho appreso fin'ora sui posizionamenti dei CSS.
Preciso che la cosa si risolve mettendo il padre con position relative e il figlio in absolute, tuttavia mi interessa davvero capire perchè col primo metodo la resa non è quella sperata.

**Mich_** · 07-01-2014, 13:13

Anzitutto hai usato una DTD Transitional, che permette ai browser qualche licenza ...

Pero` vedo che non hai definito il margin al #cont, e non hai dato nessuno stile ad <html> e a <body>.

Ti consiglio di provare a dare
margin:0;
padding:0;
a tutti i blocchi a cui non specifichi altre misure.

**ac_socmel** · 07-01-2014, 13:24

al blocco blu potresti
dare un float
dare overflow: hidden
dare un bordo

**simo22** · 07-01-2014, 16:12

Originariamente inviata da ac_socmel

al blocco blu potresti
dare un float
dare overflow: hidden
dare un bordo

Vorrei far notare che basta solo una di queste tre.

Prima di tutto dovresti evitare di usare il float perché ti costringerebbe ad usare un clearfix.
Non è necessario usare un bordo, basta anche un padding nel div principale.

Per spiegare quello che succede: i signori HTML che governano hanno deciso che se il primo elemento figlio ha un margine allora questo si deve fondere con il margine del genitore, se possibile. Se metti un padding allora non è più possibile farlo (non sarebbe equivalente) e allo stesso modo se metti il float nel padre allora il margine non è applicabile.

Non sono sicuro di perché funzioni con l'overflow ma funziona, ed è sicuramente questa la soluzione migliore.

**deleted_20210415** · 10-01-2014, 15:14

Originariamente inviata da simo22

Vorrei far notare che basta solo una di queste tre.

Prima di tutto dovresti evitare di usare il float perché ti costringerebbe ad usare un clearfix.
Non è necessario usare un bordo, basta anche un padding nel div principale.

Per spiegare quello che succede: i signori HTML che governano hanno deciso che se il primo elemento figlio ha un margine allora questo si deve fondere con il margine del genitore, se possibile. Se metti un padding allora non è più possibile farlo (non sarebbe equivalente) e allo stesso modo se metti il float nel padre allora il margine non è applicabile.

Non sono sicuro di perché funzioni con l'overflow ma funziona, ed è sicuramente questa la soluzione migliore.

Confermo il padding, il float ti preclude il centramento del padre (almeno che non usi qualche escape con JS)

Discussione: Inserire un top margin per contenutore figlio lasciando inalterata la posizione del padre

Strumenti discussione

Ricerca discussione

Visualizza

Inserire un top margin per contenutore figlio lasciando inalterata la posizione del padre

Permessi di invio