[CSS] allineamento div

[federcla]

Ciao a tutti, ho bisogno di un'aiuto con i CSS, ho iniziato ad usarli da poco e trovo ancora delle difficoltà.

body
{
 margin: 0px;
 padding: 0px;
 font-family: verdana, arial, helvetica, sans-serif;
 font-size: 12px;
 line-height: 22px;
 color: black;
 background-color: #ccc;	
}
	
#container 
{
 width: 100%;
 background-color: #eee;
}
  
#top
{
 margin-top: 5px;
 padding: 10px;
 background-color: #fff;
 border: 1px solid #000;
 margin-left: 112px;
 width:  800px;
}
	
#left
{
 background-color: #fff;
 border: 1px solid #000;
 padding: 10px;
 margin-left: 112px;
 width: 102px;
 height: auto;
}
	
#middle
{	{
 background-color: #fff;
 border: 1px solid #000;
 padding: 10px;
 margin-left: 219px;
 width: 581px;
 height: auto;
}
	
#right
{
 background-color: #fff;
 border: 1px solid #000;
 padding: 10px;
 margin-left: 805px;
 width: 102px;
 height: auto;
}

Non riesco a far rimanere sulla stessa line orizzontale i blocchi LEFT,MIDDLE,RIGHT.
Ho frova to con float e con position, ma il risultato non cambia, praticamente creo una bella scaletta.

Mi potete aiutare?

Ciao e grazie a tutti.

[Zulkifar2]

Non so quasi nulla pure io...
cmq dopo middle hai aperto due graffe al posto di una.
Poi io metterei float:left sul div left e float:right sul div right. Quindi do al div middle degli adeguati margini destro e sinistro.
Hai già provato così?

[federcla]

Ho provato solo con il float left, ma non ha funzionato, ora provo come hai detto tu, poi ti faccio sapere. Comunque grazie per l'aiuto.

[Mich_]

I tuoi nomi non mi piacciono: sono nomi usati dal DOM, e quindi possono generare confusione.
In paticolare top e` il frame piu` esterno, e nel DOM e` sinonimo di window (se non ci sono frame).

Poi una considerazione sulle dimensioni: hai tre blocchi da affiancare: se sono tutti a dimensione fissa, potrebbero non starci (non puoi sapere quanto e` larga la finestra in cui vai a inserirli).

Usa il padding il meno possibile: nel box model IE e` interpretato in modo diverso (e` all'interno delle dimensioni anziche` all'esterno).

Per fare una cosa fatta bene, elimina tutti i margini e inserisci invece dei float: sicuramente left per quello a sinistra, per quello centrale puoi usare anche left; per quello a destra usa left se lo metti dopo gli altri, usa invece il right se lo vuoi mettere come primo o come secondo. (ricorda che il blocco successivo deve avere il clear:all; )

La larghezza: se vuoi puoi mettere larghezza fissa ai blocchi laterali, ma lascia senza width quello centrale; meglio sarebbe usare una larghezza percentuale (anche per problemi di accessibilita`).

[federcla]

Grazie per i consigli, in particolare quello sui nomi.
Ho fatto come mi hai consigliato tu, ho tolto i margini, ho inserito il float: left; a tutti ed ho inserito il clear: all; nell'ultimo div, ma il risultato finale non è proprio quello che cercavo io.
Mi ha allineato i 3 blocchi ma li ha attaccati uno all'altro ed li ha posizionati tutto a sinistra, mentre io vorrei metterli al centro e lasciare uno spazio sui lati. simile al sito di html.it ma con 5px di spazio tra i div.

Sicuramente mi è sfuggito qualcosa.

Grazie ancora per l'aiuto.

[Mich_]

No, non ti e` sfuggito nulla. E` a me che e` sfuggito cosa volevi (o forse non lo hai detto).

In tal caso devi lavorare con float:left; per quello a sin e float:right; per quello a destra; poi devi sistemare i margini.

Se vuoi uno spazio garantito (ad esempio 5 px), ti conviene mettere:
margin: 0 5px 0 0; /* nel div a sinistra /*
margin: 0 0 0 5px; /* nel div a destra /*
margin: 0 auto; /* nel div centrale */

Nota che per IE questi valori non ti centrano il blocco centrale, cosa che fanno invece negli altri browser.

Naturalmente ci deve essere spazio sufficiente, altrimenti l'ultimo blocco che definisci finisce sotto agli altri.

[federcla]

Secondo me sono io, che non farò mai pace con i fogli di stile, ma mai arrendersi.

#sinistro
{
 float: left;
 background-color: #fff;
 border: 1px solid #000;
 padding: 10px;
 margin-left: 10%;
 margin-right: 5px;
 width: 10%;
}
	
#centro
{
 float: left;
 margin-right: 5px;   
 background-color: #fff;
 border: 1px solid #000;
 padding: 10px;
 width: 581px;
}
	
#destro
{
 background-color: #fff;
 border: 1px solid #000;
 padding: 10px;
 width: 102px;
}

adesso mi ha messo i blocchi in seguenza, ma il primo invece di partire dal punto che gli dico io, ovvero il 10% dal lato sinistro, parte quasi dal centro, come se si agganciasse al blocco superiore.

FORSE HO SBAGLIATO SPORT?

Grazie a tutti per l'aiuto.

[Mich_]

Se vuoi suddividere in tre colonne, puo` convenire inserire i tre blocchi dentro un blocco che li contiene tutti e tre: questo semplifica qualche cosa.

I valori % in particolare si riferiscono alle dimensioni del blocco che contiene cio` che si sta dimensionando (mi pare di aver capito cosi`).

Io non userei i margini come li hai messi tu. Tieni presente che le differenze tra IE e gli altri in tal caso ti fanno impazzire.

Prova a fare una struttura che blocco per blocco sia piu` semplice.

Se la cosa deve avere una certa simmetricita`, racchiudere i tre in uno che contiene solo quelli, ti aiuta.
Normalmente non e` un errore semantico, dato che un posizionamento di quel tipo rispecchia un ordine che viene maggiormente evidenziato dal racchiudere le tre colonne in un unico blocco.

Altra cosa: il padding nei browser normali viene sommato al width, mentre e` incluso nel width per il browser IE. Se puoi fare senza padding (con dei margini opportuni) e` piu` semplice.


Nel tuo CSS non vedo il float per il blocco a destra (e questo ti fa perdere la simmetria).

[federcla]

Quindi dovrei fare un'altro contenitore, posizionarlo al centro, ed al suo interno inserire i 3 blocchi? Ora provo in questo modo.

Il float nell'ultimo blocco c'è ma per sbagli l'ho cancellato nella tracrizione.

Grazie ancora per l'aiuto.

[federcla]

Ok, con il contenitore centrale è diventato tutto + facile, grazie ancora.

Ora ho un altro bubbio, il div centrale è quello principale ovviamente, ho notato che aumentando l'altezza di questo aumenta anche quella del contenitore, fin qui tutto logico, sto cercando di aumentare anche quelli laterali, mi spiego meglio vorrei che fossero tutti sempre della stessa lunghezza, come potrei fare?

ciao e grazie.