allineamento div

[palmerstoneroad]

Ciao,

sto cercando di capire quale istruzione CSS usare per allineare i div in questa pagina
http://www.geoseo.it/

Mi date un consiglio? Avete suggerimenti?

grazie!

[lisadamus]

Nel secondo box, quello ecntrale, hai messo un margin-left di 26px
devi diminuirlo e vedrai che il box a destra si allinea.

[palmerstoneroad]

provato ma niente...

Il risultato che voglio ottenere è questo: http://www.vooshthemes.com/gallery/saburo/

grazie!

[lisadamus]

Ho provato con firebug e mi risulta che cambiando
#featured-projects .featured-project-block { margin: 26px; } e mettendo
#featured-projects .featured-project-block { margin: 21px;}
il box si riordina.
Fammi sapere

[codencode]

Quanto proposto da @lisadamus è corretto, sebbene con tale soluzione i tre box non risultino spaziati in modo uniforme.
Io userei la tecnica dei float opposti, ovvero metterei float:left ai primi 2 box e float:right al terzo box; poi diminuirei il margin-left del secondo box fino ad ottenere una distanza uguale tra i box.

[palmerstoneroad]

ciao,

ho provato la soluzione di lisadamus e ora i blocchi sono allineati. In realtà, si nota che i margini tra un'immagine e l'altra sono diversi.

@codencode: mi riporteresti le istruzioni da inserire nel css per avere la tua soluzione? sono un pò negato con i CSS...

cm

[palmerstoneroad]

ciao,

ho provato la soluzione di lisadamus e ora i blocchi sono allineati. In realtà, si nota che i margini tra un'immagine e l'altra sono diversi.

@codencode: mi riporteresti le istruzioni da inserire nel css per avere la tua soluzione? sono un pò negato con i CSS...

cmq grazie ad entrambi

[codencode]

Supponiamo che i tre box siano #box1, #box2 e #box3.

div#box1, div#box2 {
     float: left;
}
div#box2 {
     margin-left: una misrua tale da avere i tre box spaziati allo stesso modo;
}
div#box3 {
     float: right;
}

[lisadamus]

Io di solito, per mantenere un certo equilibrio nella grafica del sito, uso la misura di 960 px,
così divido i tre box centrali in:
spazio 5px - box1 di 310px- spazio 10px - box2 di 310px - spazio 10px - box3 di 310px - spazio 5px

tutti con float left e ricordati che se usi padding, devi toglierlo dalla dimensione del box, quindi se metti un padding di 10px, il box dovrà diventare di 290px
in questa maniera risultano allineati e sempre centrati.

[codencode]

Usare la tecnica dei float opposti è vantaggiosa per molti motivi.
Primo fra tutti il fatto che risolve il bug "3 pixel jog" di IE.
E poi è ottima nel caso si realizzi un layout responsive perché aiuta a gestire lo scorrimento verso sinistra quando si ridimensiona la finestra del browser.