Ciao zampi91,
non conosco bene mootools ma credo che occorre posizionarle tramite CSS.
Per esempio puoi dare alla classe icon questo stile

.Icon {
float:left;
width:70px;
height:70px;
}

Dove 70px è la dimensione che hai impostato per la cella della griglia.

Il problema non sta nel css. Se tolgo il makeDraggable si posiziona tutte correttamente, solo che ovviamente non ho la funzione drag

Per farmi un'idea puoi copiare l'html relativo al problema, ossia solo quello in cui vi sono le icone?

Come richiesto ecco il codice:

Pagina HTML:
[PHP]<div id="Desk">
<div class="Icon" ondblclick="javascript:openWin('0','Account', 500, 500, 500, 500);"><div class='IconImg'><img src="applications/images/Account.png" /></div><div class='IconText'>Account</div></div>
<div class="Icon" ondblclick="javascript:openWin('1','MyApp', 300, 300, 600, 600);"><div class='IconImg'><img src="applications/images/MyApp.png" /></div><div class='IconText'>MyApp</div></div>
</div>[/PHP]

codice CSS:
[PHP]#Desk{
position:relative;
min-height:500px;
width:100%;
}
.Icon{
margin-right:20px;
position:absolute;
height:65px;
width:50px;
z-index:1;
padding:20px; 10px;
}
.IconImg{
height:48px;
width:48px;
}
.IconText{
height:15px;
width:50px;
font-size: 0.65em;
text-align:center;
} [/PHP]

Potrei sbagliarmi, ma io rimango convinto che il problema è il CSS.
Ho riprodotto l'errore con il tuo codice, ma mi è bastato sostituire la riga della classe Icon

position:absolute;

con la seguente

float:left;

e i div si vedono affiancati.

Ho provato come consigliato ma l'effetto non cambia.

Ho provato a togliere il javascript che mi permette il drag delle icone e queste si dispongono correttamente, quando riattivo il js si posizionano erratamente.

Ho provato come consigliato ma l'effetto non cambia.

Ho provato a togliere il javascript che mi permette il drag delle icone e queste si dispongono correttamente, quando riattivo il js si posizionano erratamente.

@zampi91 said:

Ho provato come consigliato ma l'effetto non cambia.

Ho provato a togliere il javascript che mi permette il drag delle icone e queste si dispongono correttamente, quando riattivo il js si posizionano erratamente.
Puoi postarmi anche il codice javascript che utilizzi? E se puoi anche fornirmi i file javascript utilizzati.

Ecco tutto completo:

megaupload.com/?d=XNCRLSP3

Grazie per le risposte

@zampi91 said:

Ecco tutto completo:

megaupload.com/?d=XNCRLSP3

Grazie per le risposte
Verifica così:

.Icon{
    margin-right:20px;
    float:left;
    **left:0;**
      height:65px;
      width:50px;
      z-index:1;
      padding:20px; 10px;
      border: red solid 1px;
}

$$('.Icon').each(function(el) {
var drag = new Drag.Move(el,{
grid: 112,
preventDefault: false,
onStart: function() {
el.setStyle('z-index',z++).fade(0.7);
},
onComplete: function() {
el.fade(1);
}
});
**el.setStyle('position','relative'); **

  }); 

Ok così si posizionano di fianco.. non capisco perchè venga lasciato uno spazio al centro.

Ovvero, non si dispongono una affianco all'altra ma lasciano tra di loro lo spazio per un'altra icona

@zampi91 said:

Ok così si posizionano di fianco.. non capisco perchè venga lasciato uno spazio al centro.

Ovvero, non si dispongono una affianco all'altra ma lasciano tra di loro lo spazio per un'altra icona
Hai modificato sia il file css inserendo

float:left;
left:0;

che il js?

Si ho fatto come hai scritto...

Ti allego una immagine di come viene visualizzato su Firefox su windows, Internet explorer 8 su windows e firefox su Ubuntu:

effettivamente va bene.... è solo safari che da problemi.

Safari non lo utilizzo, anche per testing. In effetti è una mia mancanza.

Grazie per il tuo aiuto

Figurati, se posso lo faccio con piacere.