"width: calc(100% / 3);" not working properly

Question

I have a 3 column layout that should fill the whole screen so on my columns I am using:

width: calc(100% / 3);

So lets say for example my screen is 782px wide:

782 / 3 = 260.66̅

However the problem I have is in Internet Explorer, where it rounds the pixels to two decimal places (260.67)

260.67 * 3 = 782.01

So at certain widths, I lose a 1/3 of my page as it wraps underneath.

Here's an example:

Does anyone know of an elegant way of solving this problem?

I know I could use width: 33.33%, however there's a small part of me inside that cries knowing that it's not 100% bang on.

Answer 1

Try width: calc(100% * 0.33333); to make sure float rounding errors err on the side of caution or width: calc((100% / 3) - 0.1px);.