[html] css divide width 100% to 3 column

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?

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;

}

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

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 !

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()

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

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.

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.

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).

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

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