Meilleure façon de représenter 1/3 de 100% en CSS ?

Question

J'ai un gros <div> avec trois petits <div>l'intérieur, en ligne. Ils ont chacun 33% de largeur, mais cela cause quelques problèmes d'alignement car 3 * 33% != 100%. Quelle est la meilleure façon de représenter un tiers parfait dans CSS comme ça ? Peut-être seulement 33,33% ?

Answer 1

Maintenant que calc est largement pris en charge par les navigateurs modernes, vous pouvez utiliser :

#myDiv {
    width: calc(100% / 3);
}

Ou vous pouvez l'utiliser comme solution de secours si votre navigateur ne le prend pas en charge :

#myDivWithFallback {
    width: 33.33%;
    width: calc(100% / 3);
}

Answer 2

Vous tenez compte des marges ? Vous pouvez aller 30 % par colonne avec une marge de 5 % de chaque côté de la colonne centrale.

Exemple rapide

Answer 3

.col_1_3 {
    width: 33%;
    float: left;
}

.col_1_3:nth-of-type(even) {
    width: 34%;
}