Organizzare div al'interno di un altro div

**chigibi** · 05-03-2015, 15:53

Ciao, sto cercando di capire come funzionano i div all'interno di un altro div. Ho preso un layout a tre colonne da questo sito e nella colonna centrale ho inserito 4 box che vorrei tenere in verticale e centrati rispetto al contenitore (content)
1) il box4 non riesco a vederlo centrato ( margin:0 auto ? )
2) il testo dopo il box4 sale alla destra del box 4
3) se elimino il testo dopo il box4 o lo inserisco in un altro div spariscono le linee che delimitano la colonna centrale.
Mi potreste, cortesemente, far capire il perchè di queste situazioni e com si risolvono?
Grazie

**chigibi** · 05-03-2015, 15:56

Posto il codice:

<body>
<div id="container">
<div id="header">
<h1>titolo</h1>
</div>
<div id="navigation">
<ul>
<li><a id="activelink" href="#">Home</a></li>
<li><a href="#">link1</a></li>
<li><a href="#">link2</a></li>
<li><a href="#">link3</a></li>
</ul>
</div>
<div id="extra">
<div class="newsbox">
<h2>Larghezza delle colonne</h2>
<p>La tendenza è avere le due colonne laterali a larghezza fissa e la colonna centrale fluida [...]</p>
</div>
<div class="newsbox">
<h2>Largezza totale</h2>
<p>Un layout a tre colonne si presenta generalmente fluido a larghezza totale,
e cioè occupa in ampiezza tutta la larghezza della finestra del browser [...]</p>
</div>
</div>
<div id="content">
<div id="box1">
<img src="foto.jpg" alt="foto" width="150" height="150" />
</div>
<div id="box2">
Mario Rossi
</div>
<div id="box3">
descrizione
</div>
<div id="box4" >
<p>Il layout a tre colonne è uno dei più diffusi e permette di gestire siti di dimensioni medio-alte,
fino ad arrivare ai portali. Si compone delle seguenti sezioni fondamentali:
header, navigazione, contenuti, sezione extra e footer.</p>
<p>In quanto alla non meglio specificabile sezione extra questa può contenere, come abbiamo visto nell' introduzione,
svariate funzionalità del sito: news, sondaggi, banner, navigazione supplementare e quant'altro: dovrebbe comunque
essere facilmente consultabile, non troppo scarna, nè troppo densa. Questo tipo di layout, proprio per la presenza
di una sezione logica (e fisica) aggiuntiva è indicatissimo per impaginare siti dinamici attraverso linguaggi lato
server quali php o asp e comunque siti con molti contenuti e/o aggiornamenti frequenti.</p>
<p>Resta l' idea che la sezione dei contenuti dovrebbe essere la più corposa, e quindi la colonna centrale
la più lunga. Come per il layout a due colonne, la versione a tre colonne con i float rispetto all' analogo con posizionamenti
ha il pregio di non imporre vincoli sulla lunghezza relativa delle colonne.
D' altra parte vincola l' ordine di codifica dell' html.<br>
</div>
</div>
<div id="footer">piede</div>
</div>
</body>
</html>

**chigibi** · 05-03-2015, 16:01

sto cercando di postare il css ma non me lo permette.... :-(

**chigibi** · 05-03-2015, 16:08

/*stili per il layout fluido*/
html,body{margin: 0;padding:0}
body{font-family: arial,sans-serif;font-size: 76%}
div#container{/*nessuna regola necessaria*/}

/*stili generici, su header e footer*/
/* div#header{background-color:#36C;color: #ff0} */
div#header{background-image: URL(logo.jpg);
background-position: center center
}
h1,h2{margin: 0;padding:0}
h1{padding-left:10px;font: bold 2.3em/80px arial,sans-serif}
h2{color: #69f;font-size: 1.5em}
div#footer a{color:#fff;font-weight: bold;text-decoration: underline}

**chigibi** · 05-03-2015, 16:08

/*stili specifici per il layout*/
div#navigation{float: left;width: 160px;\width:170px;w\idth:160px;padding: 1em 0 0 10px}

div#extra{float: right; width: 160px;\width:170px;w\idth:160px;;padding: 1em 5px}

div#content{margin: 0 170px;
padding: 1em 10px;
border-width: 0 1px;
border-style:solid;
border-color: #ccc;}

div#footer{clear:both;
text-align:center;
padding: 5px 0;
background-color: #69c; color: #000}

**chigibi** · 05-03-2015, 16:09

div#box1{float: left;
width: 100%;
height: 200px;
background-color: #fff;
text-align:center;
padding: 1em 0 0 10px}

div#box2{float: left;
width: 100%;
height: 30px;
text-align:center;
background-color: #fff;
padding: 1em 0 0 10px}

div#box3{float: left;
width: 100%;
height: 40px;
background-color: #fff;
text-align:center;
padding: 1em 0 0 10px}

div#box4{float: left;
width: 90%;
align:center;
background-color: #fff;
border-width: thin;
border-color: #ccc;
border-style: solid;
padding: 2%;}

**chigibi** · 05-03-2015, 16:09

Scusatemi, ma ho dovuto inviare il css a pezzi. Non so il perchè ma non mi consentiva di inserirlo tutto...

**Prill** · 05-03-2015, 16:18

Poiché i quattro box devono disporsi l'uno sotto all'altro, via quel float che gli hai attribuito

**chigibi** · 05-03-2015, 17:22

Grazie! Funziona!
Però se nel box4 modifico il margin, per esempio metto margin:20 auto mi sposta tutto a sinistra, perchè? non mi dovrebbe solo inserire un margine in alto ed in basso?

**KillerWorm** · 05-03-2015, 18:43

Ciao, se è scritto esattamente come hai postato (margin:20 auto) il browser ti genera un errore e quindi andrà ad ignorare quella regola. Il valore numerico, in questo caso, devi indicarlo con una unità di misura. Ad esempio margin:20px auto;

Discussione: Organizzare div al'interno di un altro div

Strumenti discussione

Ricerca discussione

Visualizza

Organizzare div al'interno di un altro div

Permessi di invio