La propriété CSS3 box-sizing vient à notre aide en ces temps difficiles ou l’on doit sortir la calculette pour connaître la largeur de nos blocs avec des padding en px et des width en %.
Le Responsive Web Design ne vient rien arranger à l’affaire puisque une mauvaise appréciation du calcul de la largeur des blocs viendra perturber notre mise en page. Alors pourquoi ne pas adopter tout de suite
* { box-sizing: border-box; } afin d’obtenir une largeur connue par avance voir l’exemple comparatif ci-dessous :

Il existe 3 valeurs à cette propriété :
{box-sizing:border-box}{box-sizing:content-box}{box-sizing:padding-box}
Comme souvent avec les propriétés CSS3 on devra compenser au manque de certains navigateurs :

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing : border-box;

behavior: url(« boxsizing.htc »);
-webkit-box-sizing: border-box;/*pour safari et chrome*/
-moz-box-sizing: border-box;/*pour firefox/
box-sizing : border-box;

IE6/IE7 ne comprenant pas cette propriété on utilisera un polyfill
behavior: url(« boxsizing.htc »);
Toutefois je constate que cela ne fonctionne pas avec la valeur padding-box sous ie7;

La valeur border-box me semble la plus intéressante à titre personnelle, elle pourra s’intégrer à une CSS RESET et ainsi on n’aura plus à focaliser sur la largeur de nos boites, elles seront de la taille indiquée et rien d’autres ! quel soulagement n’est-ce pas ?