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

Css Problem Overview

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%?

Css Solutions

Solution 1 - Css

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

Solution 2 - Css

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

Quick example

Solution 3 - Css

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

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

Solution 4 - Css

The highest resolution screen is a non-production NEC LCD screen with a resolution of 2800x2100. Even at that size, one pixel is 0.0357% of the width of the screen. So 33.33% should be close enough until 5,000-pixel-wide screens become the norm.

John Resig did some research into sub-pixel rounding in different browsers, though, so depending on your three columns to equal exactly the width of the screen may never have a perfect solution.

Content Type	Original Author	Original Content on Stackoverflow
Question	AKor	View Question on Stackoverflow
Solution 1 - Css	Nathan Chase	View Answer on Stackoverflow
Solution 2 - Css	Marcel	View Answer on Stackoverflow
Solution 3 - Css	Bruno Canongia	View Answer on Stackoverflow
Solution 4 - Css	Plutor	View Answer on Stackoverflow