css divide width 100% to 3 column - html

Question

I have a layout where I have 3 columns.
Therefore, I divide 100% by 3.
The result is obviously 33.333....
My goal is perfect 1/3 of screen.
Question:
How many numbers after dot can CSS handle to specify 1/3 of width ?
e.g. 33.33333 (n=5) ← how many n can css handle
HTML:
<div id="wrapper">
<div id="c1"></div>
<div id="c2"></div>
<div id="c3"></div>
</div>
CSS:
#c1, #c2, #c3 {
width: 33%; // 1/3 of 100%
}
Is there a better way to divide by 3?

Answer 1

As it's 2018, use flexbox - no more inline-block whitespace issues:
body {
margin: 0;
}
#wrapper {
display: flex;
height: 200px;
}
#wrapper > div {
flex-grow: 1;
}
#wrapper > div:first-of-type { background-color: red }
#wrapper > div:nth-of-type(2) { background-color: blue }
#wrapper > div:nth-of-type(3) { background-color: green }
<div id="wrapper">
<div id="c1"></div>
<div id="c2"></div>
<div id="c3"></div>
</div>
Or even CSS grid if you are creating a grid.
body {
margin: 0;
}
#wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: minmax(200px, auto);
}
#wrapper>div:first-of-type { background-color: red }
#wrapper>div:nth-of-type(2) { background-color: blue }
#wrapper>div:nth-of-type(3) { background-color: green }
<div id="wrapper">
<div id="c1"></div>
<div id="c2"></div>
<div id="c3"></div>
</div>
Use CSS calc():
body {
margin: 0;
}
div {
height: 200px;
width: 33.33%; /* as #passatgt mentioned in the comment, for the older browsers fallback */
width: calc(100% / 3);
display: inline-block;
}
div:first-of-type { background-color: red }
div:nth-of-type(2) { background-color: blue }
div:nth-of-type(3) { background-color: green }
<div></div><div></div><div></div>
JSFiddle
References:
How to remove the space between inline-block elements?
MDN calc()
Can I Use calc()

Answer 2

A perfect 1/3 cannot exist in CSS with full cross browser support (anything below IE9). I personally would do: (It's not the perfect solution, but it's about as good as you'll get for all browsers)
#c1, #c2 {
width: 33%;
}
#c3 {
width: auto;
}

Answer 3

How about using the CSS3 flex model:
HTML Code:
<div id="wrapper">
<div id="c1">c1</div>
<div id="c2">c2</div>
<div id="c3">c3</div>
</div>
CSS Code:
*{
margin:0;
padding:0;
}
#wrapper{
display:-webkit-flex;
-webkit-justify-content:center;
display:flex;
justify-content:center;
}
#wrapper div{
-webkit-flex:1;
flex:1;
border:thin solid #777;
}

Answer 4

Using this fiddle, you can play around with the width of each div. I've tried in both Chrome and IE and I notice a difference in width between 33% and 33.3%. I also notice a very small difference between 33.3% and 33.33%. I don't notice any difference further than this.
The difference between 33.33% and the theoretical 33.333...% is a mere 0.00333...%.
For arguments sake, say my screen width is 1960px; a fairly high but common resolution. The difference between these two widths is still only 0.065333...px.
So, further than two decimal places, the difference in precision is negligible.

Answer 5

.selector{width:calc(100% / 3);}

Answer 6

In case you wonder, In Bootstrap templating system (which is very accurate), here is how they divide the columns when you apply the class .col-md-4 (1/3 of the 12 column system)
CSS
.col-md-4{
float: left;
width: 33.33333333%;
}
I'm not a fan of float, but if you really want your element to be perfectly 1/3 of your page, then you don't have a choice because sometimes when you use inline-block element, browser can consider space in your HTML as a 1px space which would break your perfect 1/3. Hope it helped !

Answer 7

Just in case someone is still looking for the answer,
let the browser take care of that. Try this:
display: table on the container element.
display: table-cell on the child elements.
The browser will evenly divide it whether you have 3 or 10 columns.
EDIT
the container element should also have: table-layout: fixed otherwise the browser will determine the width of each element (most of the time not that bad).

Answer 8

Just to present an alternative way to fix this problem (if you don't really care about supporting IE):
A soft coded solution would be to use display: table (no support in IE7) along with table-layout: fixed (to ensure equal width columns).
Read more about this here.

Answer 9

I have found that 6 decimal places is sometimes required (at least in Chrome) for the 1/3 to return a perfect result.
E.g., 1140px / 3 = 380px
If you had 3 elements within the 1140 container, they would need to have a width set to 33.333333% before Chrome's inspector tool shows that they are at 380px. Any less amount of decimal places, and Chrome returns a lesser width of 379.XXXpx

Answer 10

2018 Update
This is the method I use width: 33%; width: calc(33.33% - 20px); The first 33% is for browsers that do not support calc() inside the width property, the second would need to be vendor prefixed with -webkit- and -moz- for the best possible cross-browser support.
#c1, #c2, #c3 {
margin: 10px; //not needed, but included to demonstrate the effect of having a margin with calc() widths/heights
width: 33%; //fallback for browsers not supporting calc() in the width property
width: -webkit-calc(33.33% - 20px); //We minus 20px from 100% if we're using the border-box box-sizing to account for our 10px margin on each side.
width: -moz-calc(33.33% - 20px);
width: calc(33.33% - 20px);
}
tl;dr account for your margin

Answer 11

I do not think you can do it in CSS, but you can calculate a pixel perfect width with javascript. Let's say you use jQuery:
HTML code:
<div id="container">
<div id="col1"></div>
<div id="col2"></div>
<div id="col3"></div>
</div>
JS Code:
$(function(){
var total = $("#container").width();
$("#col1").css({width: Math.round(total/3)+"px"});
$("#col2").css({width: Math.round(total/3)+"px"});
$("#col3").css({width: Math.round(total/3)+"px"});
});