96

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

Improve this question
4
  • 4
    Just throw enough decimal places at it until it's unlikely someone has a desktop large enough to make sig.figs relevant to the calculation. Commented Mar 1, 2011 at 18:31
  • 3
    You can't specify fractions, so 33.33% is pretty much your only option. Commented Mar 1, 2011 at 18:32
  • 4
    Useful info: Sub-Pixel Rendering Problems in CSS Commented Mar 1, 2011 at 18:34
  • 1
    This is why it would be awesome to count in base 12 rather than in base 10. Half=6, third=4, quarter=3, sixth=2. Two thirds=8, three quarters=9. Base 10 is a pain Commented Feb 22, 2021 at 11:07

4 Answers 4

Reset to default
142

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); }
Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

Don't forget the fallback: .column-one-third { width: 33.33%; width: calc(100%/3); }. That way you can support non calc browsers.
I've found that 6 decimal places is often necessary for it to properly calculate the exact 1/3 of a div. width: 33.333333%;
side note, both calc(200% / 3) and calc(100% / 1.5) work nicely as 2/3rds
15

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

Quick example

Improve this answer

Comments

9 
.col_1_3 { width: 33%; float: left; } .col_1_3:nth-of-type(even) { width: 34%; }
Improve this answer

1 Comment

.col_1_3 {width: 33.33%; float: left;} is a better approach. Maybe some box-sizing: border-box and some padding.
7

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.

Improve this answer

3 Comments

That "high" sounds a little low for current non-production monitors. This looks a little more reasonable as a current technology ceiling. en.wikipedia.org/wiki/Ultra_High_Definition_Television
This answer is not very future proof
2021: Writing this comment from my 3840x2160 standard production monitor

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.