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

Answer 1

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

Answer 2

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

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

Answer 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

Answer 4

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.