"width: calc(100% / 3);" not working properly
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);
.
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.