I’m noticing that display:table on a div will cause its width calculation to have rounding issues, which is odd because I am sizing at 100%.
http://jsbin.com/obidun/2/edit
Note that the upper section has a div with width of 55%, with a nested display:table div of width 100%. The nested div does not extend to the edge of its parent (note the white bleed-through of the parent div).
The lower section is exactly the same, except the nested div is not set to display:table, and there is no bleed through.
Why does display:table affect the width calculation, especially at 100%? Is there a way for me to work around this? My current thought is to just set the width to 101% and set overflow to hidden…
Note: I am using Chrome. IE seems to be okay, at least at the given size.
Percentage units are converted to pixels internally and each browser does it differently. If the solution works today, go with it, but be aware it may not apply tomorrow.