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%. W开发者_运维百科hat 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%;
}

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.