Problema con margin-top

**sandrone65** · 05-04-2011, 22:49

Ciao a tutti,
sarò poco fresco mentalmente

ma non riesco a capire il funzionamento di questa pagina:

http://www.alepis.com/test/prova.htm

Ho impostato "margin:200px auto;" al DIV ".msgred", che a sua volta è posizionato all'interno del DIV "#container".
A rigor di logica ".msgred" dovrebbe staccarsi 200px rispetto al suo contenitore "#container", invece è "#container" che si stacca di 200px rispetto ad "#header", proprio come se fosse "#container" e non ".msgred" ad avere il margin-top a 200px.
Come si spiega?

**MaxSimon** · 06-04-2011, 00:55

Ma tu cosa devi ottenere?
A rigor di logica il container dovrebbe essere il "contenitore" di tutti gli altri div (header compreso).
Puoi fare così:

Codice PHP:


<style type="text/css"> 

  body { background : #fff; color:#90341b; [COLOR=deeppink] margin:0; padding:0;height:100%; width:100%;[/COLOR] }

  #container {[COLOR=deeppink]width: auto; margin:0 auto;[/COLOR] background:#f4ebdf;}

  #header {width: 100%;background:green;}

  #headerinterno {width: 980px;height:80px;margin:0 auto;}

  .msgred {text-align:center; width:600px; margin:200px auto; border:3px dashed red;}

</style>

<body>

   <div id="container">

     <div id="header">

         <div id="headerinterno"> HEADER INTERNO</div>

     </div>

      <div class="msgred">Messaggio con bordo rosso</div>

   </div>

</body>

Ho modificato l'html spostando il div header dentro il div container e ho aggiunto qualcosa alle tue impostazioni css che, a mio avviso, potrebbero crearti il problema del posizionamento errato (sono evidenziati in fucsia)

Spero di essere stato d'aiuto.
Ciao.

**sandrone65** · 06-04-2011, 09:22

Ciao MaxSimon, grazie per l'attenzione e per l'esempio.
Il mio problema però è più concettuale che pratico, nel senso che mi piacerebbe capire questo particolare comportamento: tornando alla mia pagina impostando il margin-top del div MSGRED, questo dovrebbe staccarsi di 200px rispetto al suo contenitore (CONTAINER), invece fa staccare di 200px il contenitore stesso rispetto a quello precedete (HEADER).
Perchè avviene questo?
Ciao

**mucu** · 06-04-2011, 12:22

perchè i margini verticali collassano e si combinano per formare un unico margine.
i margini orizzontali non collassano mai

**Prill** · 06-04-2011, 14:57

a corredo della risposta di mucu, ecco un interessante articolo: http://www.howtocreate.co.uk/tutoria...rgincollapsing

**sandrone65** · 07-04-2011, 22:33

Grazie per le dritte!!

Discussione: Problema con margin-top

Strumenti discussione

Ricerca discussione

Visualizza

Problema con margin-top

Permessi di invio