Allineamento colonne CSS

Printable View

06-02-2012, 19.57.14

Allineamento colonne CSS

Qualcuno riesce a spiegarmi perchè le quattro colonnine non sono perfettamente allineate al div della prima riga, anche se le percentuali sono precisamente di valore 100%?

Codice HTML:

<div style='width:100%; margin:0px; background:#fff; height:150px;'> <div style='float:left; width:100%; height:300px; background:#000; margin-bottom:5px;'></div> <div style='clear:left'> <div style='float:left; width:22%; height:150px; background:#000;margin:0px;'></div> <div style='float:left; width:4%; height:150px; background:#242424;margin:0px;'></div> <div style='float:left; width:22%; height:150px; background:#000;margin:0px;'></div> <div style='float:left; width:4%; height:150px; background:#242424;margin:0px;'></div> <div style='float:left; width:22%; height:150px; background:#000;margin:0px;'></div> <div style='float:left; width:4%; height:150px; background:#242424;margin:0px;'></div> <div style='float:left; width:22%; height:150px; background:#000;margin:0px;'></div> </div> </div>
06-02-2012, 20.08.19
karl94

Non capisco, qual'è il problema? Non vuoi il margine?
06-02-2012, 20.16.01

Il problema è che questa parte di codice:

Codice HTML:

<div style='float:left; width:22%; height:150px; background:#000;'></div> <div style='float:left; width:4%; height:150px; background:#242424;'></div> <div style='float:left; width:22%; height:150px; background:#000;'></div> <div style='float:left; width:4%; height:150px; background:#242424;'></div> <div style='float:left; width:22%; height:150px; background:#000;'></div> <div style='float:left; width:4%; height:150px; background:#242424;'></div> <div style='float:left; width:22%; height:150px; background:#000;'></div>

//ho tolto il margin 0 dato che era inutile, l'avevo messo solo così per fare

ecco con questa parte di codice dovrebbe scompori, 4 div colorati di nero divisi da essi in equalmodo fino a riempire uno spazio largo tutto il display, per questo ho scritto 22% per i div e 4% per lo spazio, così in mdo da riempire il 100% dello spazio, però questo non accade rimane un "margine" come hai detto tu a destra che mi da davvero fastidio.
E' come se me lo riempisse al 98-99%.
06-02-2012, 20.18.30
karl94

Puoi indicare l'indirizzo della pagina in questione?
06-02-2012, 20.24.00

Sto lavorando su un server locale, però ho cominciato a pensare a un sito che è ancora in fase di costruzione: http://lazytime.altervista.org/ghiski/ in cui utilizzo questa procedura in una pagina per allineare degli elementi, e mi disgusta il fatto che non siano allineati come dovrebbe, per questo ho lasciato in sospeso per un momento la continuazione del sito.
06-02-2012, 20.28.26
karl94

Usando solamente il codice che hai fornito non visualizzo il problema che descrivi, per questo ti ho chiesto l'indirizzo della pagina. Potresti caricarla temporaneamente per verificare il problema?
06-02-2012, 20.34.20

http://aboveallfun.altervista.org/index.php
06-02-2012, 20.37.02
karl94

Il codice è corretto, il fatto che non siano perfettamente allineati è colpa del browser, è un bug di WebKit, per esempio su Gecko si visualizza correttamente.
Si può ovviare al problema allineando forzatamente l'ultimo div a destra.
06-02-2012, 20.42.01

Ah ecco il perchè, mi sembrava strano. Il brutto è che io uso solo google-chrome, anche se altri possono vederla correttamente la pagina, altri che come me usano chrome lo vedono questo errore. Cercherò di inventarmi qualche cosa, grazie per avermi detto del bug, non lo sapevo.
06-02-2012, 20.44.35
karl94

Citazione:

Originalmente inviato da karl94

Si può ovviare al problema allineando forzatamente l'ultimo div a destra.

Ovvero applica all'ultimo div un float a destra, così i pixel in difetto staranno nello spazio vuoto tra gli ultimi due div.

Comunque è un problema comune a tutti i motori di rendering, mi pare che solo Gecko tratti correttamente situazioni di questo tipo.