title: percentage width with percentage padding
body: <p>I have the layout here: <a href="http://jsfiddle.net/chricholson/susXf/11/" rel="nofollow">http://jsfiddle.net/chricholson/susXf/11/</a></p>
  
  <p>In Chrome and Firefox you'll notice there is a 1 pixel gap between the edge of the red box and the image. In IE 8, this isn't there (as expected).</p>
  
  <p>This does not happen if I specify the width and padding using pixels.</p>
  
  <p>My guess, although I cannot be sure, is due to the calculations of percentages and how numbers are rounded. The 6% for the padding works out to be 20.94px, the width of the p works out as 328.06. Assuming both are rounded down (despite the fact the first should be rounded up), then the total width is 348px, which seems to be the cause of the problem. IE is maybe more intelligent and rounds up correctly?</p>
  
  <p>Nevertheless, has anyone else come across the same situation and found a fix?</p>