“width: calc(100% / 3);” not working properly in any IE

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 s

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);.

Answer 2

Better option:

li {
    &:last-child {
        margin-right: -1px;
    }
}

And you can use: width: calc(100% / 3)

Answer 3

2020 Answer

Use flexbox:

.container {
   width: 242px; /* /3 = 80.66̅  */
   height: 100px;
   
   display: flex;
}

.col {
  flex: 1 0 0; /* Set flex basis to 0 to force equal widths */
}

.col1 {
  background-color: red;
}
.col2 {
  background-color: green;
}
.col3 {
  background-color: blue;
}

<div class="container">
  <div class="col col1"></div>
  <div class="col col2"></div>
  <div class="col col3"></div>
<div>

Old Answer

It would seem that the suggestion by @web-tiki with:

width:33.33%;

is the best option.