Problema con allineamento di 3 div

[alexotto86]

Ciao a tutti, mi chiamo alessandro e sto facendo un progetto per l'università, però ho un piccolo problema con un css per allineare 3 div

La mia pagina è così formata

<div id="Contenitore">
<div id="Header" >
<div id="Logo"></div>
<div id="Intestazione"></div>
</div>
<div id="Separatore">
<ul>
[*]Home
[*]Help
[*]Credits
[/list]
</div>
<div id="Corpo">
<div id="Elenco_doc">
<div id="Titolo_Elenco"></div>
<div id="Elenco"></div>
</div>
<div id="Centro">
<div id="Contesto"></div>
<div id="Multifunzione"></div>
</div>
<div id="Apparato">
<div id="Titolo_note">

Note</p></div>
<div id="Note"></div>
</div>
</div>
<div id="Footer">

ltw16</p></div>
</div>

Il problema è nel div "Corpo" che racchiude gli altri 3 div, praticamente il 3°, "Apparato", non riesco a metterlo affianco al secondo, infatti se faccio tutto come da css qui sotto, tutti e 3 i div "Elenco_doc", "Centro" e "Apparto" escono dal div che li deve contenere

div#Corpo{
width:100%;
}

div#Elenco_doc{
min-width:100px;
width:20%;
float:left;
background-color:#F7F7F7;
margin-right:4px;
}

div#Titolo_Elenco{
margin-left:15px;
background-color:#F7F7F7;
font-size:20px;
margin-top:40px;
}

div#Elenco{
margin-top:25px;
margin-left:15px;
}

div#Centro{
float:left;
width:60%;
margin-right:4px;

}

div#Contesto{
border: 1px solid #DDD5DA;

}


div#Multifunzione{
margin-top:4px;
border: 1px solid #DDD5DA;
}


div#Apparato{
float:left;
width:19%;
margin-top:4px;
background-color:#F7F7F7;
}

div#Titolo_note{
width:100%;
text-align:center;
background-color:#F7F7F7;
}

div#Note{
padding-top:4px;
background-color:#F7F7F7;
}

La cosa strana è che se uso float:left; solo sui primi 2 div, cioè "Elenco_Doc" e "Centro" questi due vengono ben allineati e rimangono dentro al div contenitore.

lascio anche un paio di immagini per capire maglio
tutti e 3 i div in float:left
solo i primi due in float:left

Grazie tante a chi saprà aiutarmi!

[Henry.Chinaski]

Originariamente inviato da alexotto86
Il problema è nel div "Corpo" che racchiude gli altri 3 div, praticamente il 3°, "Apparato", non riesco a metterlo affianco al secondo, infatti se faccio tutto come da css qui sotto, tutti e 3 i div "Elenco_doc", "Centro" e "Apparto" escono dal div che li deve contenere

In realtà mi sembra che il div "corpo" contenga non 3, ma 9 div al suo interno, ed "apparato sembra essere il 7°. Nell'ordine:

Elenco_doc
Titolo_Elenco
Elenco
Centro
Contesto
Multifunzione
Apparato
Titolo_note
Note

Facendo i "conti della serva", "corpo" viene chiuso dopo tutti questi..... Sarà mica un problema di chiusure? :master:

[alexotto86]

Intanto grazie per esserti interessato

Ho fatto una sorta di allineamento per rendere più chiara la cosa

	<div id="Contenitore">	
        	<div id="Header" >
        		<div id="Logo">[img]fanta.gif[/img]</div>
        		<div id="Intestazione">

PHANTOMS</p></div>
        	</div>
        	<div id="Separatore">
        		<ul>
        			[*]Home
        			[*]Help
        			[*]Credits
        		[/list]
        	</div>
        	<div id="Corpo">
        		<div id="Elenco_doc">
        			<div id="Titolo_Elenco">

Elenco Documenti</p></div>
        			<div id="Elenco"></div>
        		</div>
        		<div id="Centro">	
        			<div id="Contesto"></div>
        			<div id="Multifunzione"></div>
        		</div>	
        		<div id="Apparato">
        			<div id="Titolo_note">

Note</p></div>
        			<div id="Note"></div>
        		</div>
        	</div>		
			<div id="Footer">

ltw16</p></div>
		</div>

Contenitore contiene quei 3 div scritti prima, più altri all'interno di questi ultimi. Quindi apparato rimane il 3° perchè,
Titolo_Elenco ed elenco sono dentro ad Elenco_doc;
Contesto e Multifunzione sono dentro a Centro;
Titolo_note e Note sono dentro ad apparato

E' il mio primo css forse mi sfugge qualcosa, boh...

[Mich_]

Anzitutto ti invito a leggere il regolamento: non e` messo li` per gioco, ma per migliorare il dialogo tra i frequentatori.
Il codice va inserito tramite gli appositi tag VB (prova ad usare il bottone CODE sopra l'area di inserimento.

Per arrivare al tuo problema (che non ho capito completamente), hai inserito il clear in qualche blocco?
Se no, fa' una ricerca nel forum con "clearing": ci sono migliaia di interventi.

[alexotto86]

Originariamente inviato da Mich_
Anzitutto ti invito a leggere il regolamento: non e` messo li` per gioco, ma per migliorare il dialogo tra i frequentatori.
Il codice va inserito tramite gli appositi tag VB (prova ad usare il bottone CODE sopra l'area di inserimento.

Per arrivare al tuo problema (che non ho capito completamente), hai inserito il clear in qualche blocco?
Se no, fa' una ricerca nel forum con "clearing": ci sono migliaia di interventi.

Ho appena inserito il codice tra i tag CODE, scusa, ora leggerò il regolamento...

Il clear non l'ho inserito da nessuna parte (dato che non so cosa sia, ora mi vado a documentare), il mio problema è che voglio mettere i tre div
-Elenco_doc
-Centro
-Apparato
uno affianco all'altro mantenendoli dentro al loro contenitore che si chiama Corpo.

Ora, da quello che ho capito, per affiancare dei div devo usare "float:left", il problema è che, se metto questa proprietà a tutti e 3 i div, questi escono dal loro contenitore Corpo, mentre se il float:left lo metto solo ai primi 2 rimangono tutti dentro al contenitore, con i primi due affiancati ed il 3° a capo (come si può vedere dagli screen che ho postato)

[manurat]

Probabilmente è più semplice di quel che sembra: forse la somma delle larghezze dei tre div contenuti, con eventuali rispettivi margini e padding compresi, è maggiore della larghezza del div contenitore, e quindi l'ultimo ti va "a capo"..quando esprimi le larghezze in percentuale, come hai fatto, ti conviene esprimere anche i margini laterali in percentuale.
Prova a rivedere quei margini destri di 4px..

[Mich_]

Originariamente inviato da alexotto86
Ho appena inserito il codice tra i tag CODE, scusa, ora leggerò il regolamento...

Cosi` hai perso tempo tu e ne hai fatto perdere ad altri, oltre ad aver perso alcune possibilita` di risposta di persone che si rifiutano di leggere codice non formattato.

Il clear non l'ho inserito da nessuna parte (dato che non so cosa sia, ora mi vado a documentare),

Il clear "chiude" i float precedenti e ripristina il normale flusso

Ora, da quello che ho capito, per affiancare dei div devo usare "float:left", il problema è che, se metto questa proprietà a tutti e 3 i div, questi escono dal loro contenitore Corpo,

questo e` il comportamento corretto e richiesto dalle specifiche.
Solo IE quando lavora in quirks mode non segue questa regola

mentre se il float:left lo metto solo ai primi 2 rimangono tutti dentro al contenitore, con i primi due affiancati ed il 3° a capo (come si può vedere dagli screen che ho postato)

e` una situazione ibrida che non ha molto senso.

Il float va normalmente chiuso con un clear, che puo` essere messo ad un oggetto di tipo blocco all'interno del contenitore o inserito nel pseudoelemento CONTENITORE:after, come suggerito in [Pillola] FabClearing, un metodo crossbrowser alternativo per il clearing dei float

[alexotto86]

Originariamente inviato da manurat
Probabilmente è più semplice di quel che sembra: forse la somma delle larghezze dei tre div contenuti, con eventuali rispettivi margini e padding compresi, è maggiore della larghezza del div contenitore, e quindi l'ultimo ti va "a capo"..quando esprimi le larghezze in percentuale, come hai fatto, ti conviene esprimere anche i margini laterali in percentuale.
Prova a rivedere quei margini destri di 4px..

Ho provato ad eliminare tutti i margini il problema persiste, comunque va a capo perchè al 3° non gli ho dato float:left, perchè se lo imposto così tutti e 3 i div escono dal contenitore che li contiene

Originariamente inviato da Mich_
Il clear "chiude" i float precedenti e ripristina il normale flusso

Ok, funziona, utilizzando clear il footer mi finisce in basso sotto a tutto.

Originariamente inviato da Mich_
questo e` il comportamento corretto e richiesto dalle specifiche.
Solo IE quando lavora in quirks mode non segue questa regola

Quindi non c'è nessun modo per allineare tre div e mantenerli dentro ad un contenitore?

Originariamente inviato da Mich_
e` una situazione ibrida che non ha molto senso.

infatti, non ha nessun senso, era solo per far capire il problema

[manurat]

Quindi non c'è nessun modo per allineare tre div e mantenerli dentro ad un contenitore

..hai provato a controllare ciò che ti ho detto?

[Mich_]

Quindi non c'è nessun modo per allineare tre div e mantenerli dentro ad un contenitore?

Si`, usare il clear alla fine.

IE (quirks mode) ha un clear implicito, che non permette le liberta` concesse dalle specifiche e da tutti gli altri browser