Best way to represent 1/3rd of 100% in CSS?

I have a big <div> with three little <div>'s inside of it, inline. They each have 33% width, but that causes some alignment problems because 3 * 33% != 100%. What is the best way to represent a perfect third in CSS like this? Maybe just 33.33%?


Now that calc is widely supported among modern browsers, you can use:

#myDiv {
    width: calc(100% / 3);
}

Or you can use this as a fallback if your browser wouldn't support it:

#myDivWithFallback {
    width: 33.33%;
    width: calc(100% / 3);
}

Are you making any allowance for margins? You could go 30% per column with 5% margin either side of the center column.

Quick example


.col_1_3 {
    width: 33%;
    float: left;
}

.col_1_3:nth-of-type(even) {
    width: 34%;
}