Oggi vi voglio spiegare come evitare l’inserimento dei margini in eccesso quando siamo in presenze di colonne ripetute.

Creare una colonna con i css non è un’operazione complicata, ma se abbiamo la necessità di inserire più colonne una accanto all’altro con un margine di distanza, troveremo quello stesso margine anche alla fine del template, proprio come si vede dalla foto.

 
Una soluzione potrebbe essere quella di andare a mettere mano direttamente nell’html della pagina e fare in modo che non venga aggiunto quel margine di 10px alla destra delle colonne, ma se ci troviamo impossibilitati a modificare il nostro template o semplicemente le colonne sono aggiunte dinamicamente, l’unico modo è quello di utilizzare i fogli di stile.

Quello che faremo per risolvere il problema, è andare a nascondere quel margine di 10px in eccesso, modificando ad hoc il nostro css.

 
Utilizziamo la lista non-ordinata
Per eseguire questo “trucchetto” inseriamo una lista non-ordinata (”ul“) dentro ad un div contenitore al quale specificheremo la sua larghezza. A questo punto applicheremo la proprietà “overflow:hidden” ed elimineremo il margine destro del div.

[code='css']

[/code]

Qualche calcolo per il nostro CSS
Prima di modificare il nostro css, dovremo fare qualche operazione per calcolare il margine esterno ed interno (proprietà padding e margin) che va bene per la nostra colonna. Se il nostro template ha una larghezza (width) di 970px e vogliamo inserire 3 colonne, il calcolo da fare sarà:
(Larghezza Max + Margine Destro) / # numero delle colonne – (Padding Sx e Dx + Margine Dx) = Larghezza della singola colonna
(970px + 10px) / 3 – (40px + 10px) = 276px

Andiamo ad inserire i valori giusti al nostro css:
[code='css']
.container {
margin: 0 auto;
width: 970px;
overflow: hidden;
}
ul.col3 {
width: 980px;
margin: 20px 0;
padding: 0;
list-style: none;
float: left;
}
ul.col3 li {
float: left;
background: #fff;
width: 276px;
padding: 10px 20px;
margin: 5px 10px 5px 0;
}
[/code]

Un’alternativa a questo piccolo “trucchetto” per eliminare i margini in eccesso, potrebbe essere quello di creare nel css delle classi che identifichino la prima e l’ultima colonna (per esempio .firstcol e .lastcol), ma trovo che questa tecnica sia molto più semplice da usare.

Se avete dubbi in merito o volete segnalare altre tecniche per risolvere questo problema, non esistate a lasciare i vostri commenti.

 
Fonte: Sohtanaka