css - 含まれる div は、パーセントを持つ子を含むように完全に展開されません

Question

子の div に合わせて拡張する div がありますが、子にパーセントで指定されたパディングまたはマージンを与えると、親はそのスペースを考慮していないようです。ただし、ピクセルを使用してパディングまたはマージンを指定すると、正常に動作しますが、奇妙に思えます。私は解決策を探していましたが、役に立ちませんでした。サポートする必要がある唯一のブラウザーである Firefox と Chrome の両方でこれを試しました。
http://jsfiddle.net/YTsmz/5/

ピクセルの場合:

パーセントで:

html:

<div class="field">
    <div class="name">countries</div>
    <div class="value">united states</div>
    <div class="value">united kingdom</div>
    <div class="value">dominican republic</div>
</div>

CSS:

.field {
    position: relative;
    float: left;
    border-right: 1px dotted #3d3d3d;
    line-height: 1em;
    white-space: nowrap;
    padding: 0 1% 0 1%;
    font-weight:bold;
}
.field .name {
    font-size:1em;
    line-height:1.5em;
}
.field .value {
    display: inline-block;
    margin: 0% 1% 0% 0%;
    border-right: 1px dotted #3d3d3d;
    padding: 0 1% 0 1%;
    font-size:1.3em;
    line-height:1.3em;
}
.field .value:last-of-type {
    border-right: none;
}