css divide width 100 to 3 column

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    lt div id  wrapper  gt       lt div id  c1  gt  lt  div gt       lt div id  c2  gt  lt  div gt       lt div id  c3  gt  lt  div gt   lt  div gt    CSS    c1   c2   c3       width  33      1 3 of 100      Is there a better way to divide by 3

User · Answer

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    lt div id  container  gt      lt div id  col1  gt  lt  div gt      lt div id  col2  gt  lt  div gt      lt div id  col3  gt  lt  div gt   lt  div gt    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

User · Answer

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

User · Answer

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

User · Answer

selector width calc 100    3

User · Answer

How about using the CSS3 flex model   HTML Code    lt div id  wrapper  gt       lt div id  c1  gt c1 lt  div gt       lt div id  c2  gt c2 lt  div gt       lt div id  c3  gt c3 lt  div gt   lt  div gt      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

User · Answer

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

User · Answer

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

User · Answer

As it s 2018  use flexbox - no more inline-block whitespace issues   x000D   x000D  body     margin  0      wrapper     display  flex    height  200px      wrapper  gt  div     flex-grow  1      wrapper  gt  div first-of-type   background-color  red    wrapper  gt  div nth-of-type 2    background-color  blue    wrapper  gt  div nth-of-type 3    background-color  green   x000D   lt div id  wrapper  gt     lt div id  c1  gt  lt  div gt     lt div id  c2  gt  lt  div gt     lt div id  c3  gt  lt  div gt   lt  div gt  x000D   x000D   x000D   Or even CSS grid if you are creating a grid   x000D   x000D  body     margin  0      wrapper     display  grid    grid-template-columns  repeat 3  1fr     grid-auto-rows  minmax 200px  auto       wrapper gt div first-of-type   background-color  red    wrapper gt div nth-of-type 2    background-color  blue    wrapper gt div nth-of-type 3    background-color  green   x000D   lt div id  wrapper  gt     lt div id  c1  gt  lt  div gt     lt div id  c2  gt  lt  div gt     lt div id  c3  gt  lt  div gt   lt  div gt  x000D   x000D   x000D    Use CSS calc     x000D   x000D  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   x000D   lt div gt  lt  div gt  lt div gt  lt  div gt  lt div gt  lt  div gt  x000D   x000D   x000D   JSFiddle  References   How to remove the space between inline-block elements  MDN calc   Can I Use calc

User · Answer

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

User · Answer

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

User · Answer

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

[html] css divide width 100% to 3 column

Examples related to html

Examples related to css