CSS à l'aide de pourcentage et de la marge, de remplissage ou de frontière

J'ai un problème que je ne comprends pas.
Si je le pourcentage d'utilisation de la largeur, je m'attends à ce que les éléments de calculer les bordures, les marges ou les rembourrages au sein de leur taille (en pourcentage).
Mais en fait, ces valeurs sont ajoutées à leur taille qui, je l'asume est faux.
C'est mon attente de mal?
Le soufflet montre l'exemple de la question. Les deux "divs", "gauche" et "droite" je m'attends à être sur une seule ligne. Si je supprime "frontière" qu'il fonctionne comme prévu.

<!DOCTYPE html>
<html>
<head>
<style>
.center {
  border: 1px solid black;
  width: 100%;
  overflow: auto;
}

.left {
  border: 1px solid black;
  width: 20%;
  float: left;
}

.right {
  border: 1px solid black;
  width: 80%;
  float: left;
}
</style>
</head>
<body>
<div class="center">
  <div class="left">left</div>
  <div class="right">right</div>
</div>
</body>
</html>

OriginalL'auteur Alex004 | 2011-12-25