posizionamento <div> in Firefox

[franCSK]

Buongiorno ragazzi, ho un problema che forse a molti sembrerà banale ma mi sta facendo impazzire:
ho questa pagina http://www.publistampa.net/ costruita con posizionamenti assoluti all'interno di un elemento padre con position: relative; In pratica questa è la struttura:
<div id="container">
<div id="header">....</div>
<div id="faq">....</div>
<div id="navigation">....</div>
<div id="footer">....</div>
</div>

e questo è il foglio di stile che regola il tutto:

div#container{
width: 950px;
height: 550px;
margin: 0px auto; /*centra negli altri browsers*/
text-align: left; /*ripristina l' allineamento*/
position: relative;
}
div#header
{
height: 120px;
text-align: center;
}
div#faq
{
position: absolute;
top: 121px;
left: 260 px;
}
div#navigation
{
position: absolute;
top: 125px;
left: 105 px;
text-align: left;
}
div#content
{
position: absolute;
top: 150px;
left: 260 px;
height: 380px;
width: 620 px;
text-align: center;
}
div#footer
{
position: absolute;
top: 530px;
left: 610px;
height: 15px;
font: 10px;
color: #363636;
}

Ora in pratica in Explorer e Google Chrome va tutto perfetto... in Firefox c'è qualcosa che non va poichè gli elementi vengono si posizionati nel container e bene in altezza, ma allineati tutti a sisnistra!
Dov'è l'errore???
Grazie in anticipo

[Mauro Accornero]

Il posizionamento assoluto non credo sia la soluzione migliore sarebbe meglio gestire il tutto con i float. A parte questo vedo un errore evidente nel css:

left: 260 px;

così non può funzionare, il valore e l'unità di misura non devono avere spazi in mezzo prova a riscrivere così

left: 260px;

correggilo per i vari position absolute nel css dovrebbe migliorare la situazione.

[franCSK]

Grazie mille, era proprio lì l'errore!
Certo è singolare vedere che gli altri browser nonostante l'errore 'interpretassero' bene i comandi mentre Firefox no!
Per il resto non conosco bene il funzionamento dei float e mi sembrava una buona soluzione usare posizionamenti assoluti dentro un posizionamento relativo: magari andrò a studiare un pò e vedrò se seguire il tuo consiglio.

[Mauro Accornero]

Sicuramente con un float puoi realizzare un layout con meno codice html e meno regole css, ti consiglierei di fare qualche prova se ti interessa ho scritto due articoli sui principali metodi per trattare il float.

gestire il float con clear:left

Gestire il float con overflow:hidden

[franCSK]

Grazie, ci darò sicurmente uno sguardo.

[seed_squall_it]

Vorrei aggiungere che l'uso dei posizionamenti assoluti è controindicato per realizzare interi layout, a meno che non sia effettivamente l'unico sistema possibile. Conviene usarlo solo quando veramente necessario. Per i semplici affiancamenti di colonne, il float resta la soluzione più robusta e priva di controindicazioni (la più grande controindicazione del posizionamento assoluto è l'estrazione dal flusso, che NON può essere ripristinato in modo che un box posizionato influenzi i box adiacenti. Invece, l'uso dei box flottanti lo permette). Tieni anche conto che i bug di quell'indecente di IE con i posizionamenti e lo z-index non si contano nemmeno più...

Prima di usare i posizionamenti, chiediti sempre se puoi ottenere lo stesso risultato in un altro modo, anche aggiungendo alla struttura della pagina qualche elemento privo di semantica (div e span) in più se necessario. Ti risparmi parecchi problemi (specie con IE) e ottieni layout molto più robusti.