[CSS] problema allineamento elementi DIV

Io ci stò uscendo pazzo......

In un CSS ho questo DIV :

Codice:

---

div#content    { width:780px; }

---

al suo interno devo inserirci altri 3 (tre) DIV che sarebbero questi:

Codice:

---

div#music      { width:250px; height:130; margin: auto;
                text-align:center; background-color: #cccc99; }

div#cover      { width:250px; height:130; margin: auto;
                text-align:center; background-color: #242424; }

div#words      { width:250px; height:130; margin: auto;

---

...è tutto il pomeriggio che tento ma non riesco a far si che i tre DIV rimangano allineati orizzontalmente sulla stessa riga tra di loro... non c'è "align" che tenga, non c'è "float" che tenga .... mi sta scappando da piangere ....
.....E il tutto dovrebbe essere "crossbrowser" e validato, naturalmente..... :oops:

Hai già provato ad assegnare "float: left" a tutte e 3 le colonne?

Taita, imposta le misure dei div interni con le percentuali...
Se imposti 100% sarà lungo tutti i 780 px quindi gioca con le percentuali.
Ricordati poi di mettere il float.

Provato ora .... ma.... ma.... :shock:
È un controsenso !
Va al di là della logica ..... però funziona ! :shock:

Diciamo che sarebbe + pulito nonché logico se impostassi anche il DIVVONE principale in percentuali... :wink:

Ok ok.... farò tutto in percentuali.
.....Cosa s'ha da fa per la Paoletta..... :wink:

In ogni caso, il "controsenso" riguardava la soluzione di Solitary ... mi sto ancora chiedendo il perchè sono obbligato a dare il "float left" a tutti e tre gli elementi, mah....

Perché così la prima colonna si appoggia al margine sinistro del div principale, e la seconda si appoggia alla prima e la terza alla seconda.

Piccola pillola.
Quando assegni delle percuentuali a dei div dentro un altro div, vedi di far si che la somma delle percentuali sia pari a 99%.
In questo modo non ti capiteranno problemi di visualizzazione con Internet Explorer.

guarda.. o fai:

Codice PHP:

---

div#music { width:250px; height:130; margin: auto;
text-align:center; background-color: #cccc99; display:inline }

div#cover { width:250px; height:130; margin: auto;
text-align:center; background-color: #242424; display:inline }

div#words { width:250px; height:130; margin: auto; display:inline }


---

oppure usi span anziche div. Occhio alle dimensioni, come suggeritoti da tutti!

#Attory...
Con lo SPAN ci avevo anche provato ma non riuscivo ugualmente... comunque va bene la prima opzione con i DIV

#Solitary...
Il "blocco principale" pensavo di adattarlo al 96%; in questa maniera posso inserire perfettamente i tre DIV uguali in larghezza ( 32% x 3) e anche gli altri due che vanno sotto (48% x 2) ... E poi ditemi che non sono intelligente, ghghgh :mrgreen:

Citazione:

---

Originalmente inviato da Taitaonline

#Attory...
Con lo SPAN ci avevo anche provato ma non riuscivo ugualmente... comunque va bene la prima opzione con i DIV

#Solitary...
Il "blocco principale" pensavo di adattarlo al 96%; in questa maniera posso inserire perfettamente i tre DIV uguali in larghezza ( 32% x 3) e anche gli altri due che vanno sotto (48% x 2) ... E poi ditemi che non sono intelligente, ghghgh :mrgreen:

---

......Ed infatti intelligente non lo sono....... :oops:
....Sono nuovamente qui, con un altro problema che proprio non riesco a risolvere:
Dunque, in questa pagina abbiamo tutta una serie di "DIV" che dovrebbero essere centrati rispetto al body ...
Quei 5 riquadri colorati sono altrettanti DIV inseriti in un DIV chiamato "content" ... Tutto questo blocco risulta perfettamente centrato aprendo la pagina con Firefox mentre, con IE risulta spostato a sinistra ... come fargli capire a quel "diavoletto" di IE che quel contenitore va messo al centro ?
Il problema è nato dopo che ho inserito i bordi ed i padding nei div ... senza funziona tutto bene.
Qui c'è il CSS completo di tutta la pagina:

Codice:

---

A:link        { color:#000000; text-decoration:none;
                font-size: 14pt;}

A:visited      { color:#000000; text-decoration:none;
                font-size: 14pt; }

A:hover        { color:#FF6666; text-decoration:none;
                font-size: 14pt; }

A.body        { color:#66FF99; text-decoration:none;
                font-size: 14pt;}

A.body:visited { color:#66FF99; text-decoration:none;
                font-size: 14pt; }

A.body:hover  { color:#FF6666; text-decoration:none;
                font-size: 14pt; }

body          { margin:0; padding:0;
                background-color: #061229;
                font-family: verdana,arial;
                color: #FFFFCC;
                text-align:center; }

img            { border: 0px; }

div#container  { width:780px; margin: 10px auto; }

div#head      { width:780px; height:100px;
                margin:auto; text-align:center; }

div#content    { width:780px; margin: auto; padding-left: 30px;}

div#loghi      { width:780px; height:50px;
                margin: 20px auto;
                text-align:center; }

div#music      { width:240px; height:170px; float:left;
                border:5px solid #999900;
                background-color: #cccc99; color: #000000;
                padding-right: 5px; padding-left: 5px;
                padding-top: 5px; }

div#cover      { width:240px; height:170px; float:left;
                border:5px solid #006699;
                background-color: #e6eeef; color: #000000;
                padding-right: 5px; padding-left: 5px;
                padding-top: 5px; }

div#words      { width:240px; height:170px; float:left;
                border:5px solid #996600;
                background-color: #efc69c; color: #000000;
                padding-right: 5px; padding-left: 5px;
                padding-top: 5px; }

div#affil      { width:290px; height:25px; float: left;
                border:5px solid #669966;
                background-color: #ccffcc; color: #000000;
                padding-right: 15px; padding-left: 15px;
                padding-top: 5px; margin: 20px auto; }

div#lista      { width:430px; height:25px; float: left;
                border:5px solid #ffcc00;
                background-color: #ffffcc; color: #000000;
                padding-right: 5px; padding-left: 5px;
                padding-top: 5px; margin: 20px auto; }

div#footer  { width:780px; height:50px;
                  margin: 20px auto;
                  text-align:center; }

---

Aggiungendo quel "padding" scritto in rosso, si centra tutto con IE ma, ovviamente, poi mi sballa con Firefox.

P.S.) tralasciamo per il momento il discorso dei DIV in percentuale, grazie. :wink:

div#content { margin-left:auto; margin-right:auto}

prova ad aggiungere questo nel foglio di stile..

EDIT: come non detto non avevo visto che avevi gia messo un margin auto, prova cmq a modificarlo come ti ho suggerito vedi che succede (ovviamente togliendo il padding-left)..

Potresti casomai provare anche a mettere a "content" anche il "text-align:center" (e a settare la width a 100%)..

In ogni caso avevo già provato anche con i due margini separati e non funzionava lo stesso ...
Il bordello è nato quando ho inserito nei div "figli" i padding left e right ed i border; infatti temo che IE "legga" il width in maniera differente da Firefox ... è che non riesco a trovare una soluzione per scrivere quelle proprietà in modo che siano compatibili con i due browser.... uffffff....

ma quel width 780 in content è necessario?

No, l'ho tolto ma non cambia nulla.

[EDIT]
Allora..... problema "padding" risolto :lol: :
IE "legge" la larghezza del DIV non calcolando il padding, mentre Firefox somma il padding alla larghezza del DIV quindi, per risolvere, basta stabilire una larghezza al DIV senza inserire nelle proprietà il padding poi, dare il valore padding ad un paragrafo ( <p> ) ed inserirrlo nel DIV insieme al testo ... in questo modo sia IE che Firefox non hanno problemi. :=D:

....Ora mi dedico ai bordi.... ci sarà un modo, mannaggia !