Calculate pixels for columns in css

Question

Good guys I have 3 columns in a space of 950px;

I did the calculations here on the calculator 950/3 = 316,666666666666667

Only when I convert it to css:

width: 316.6666666666667px; nothing changes, he takes it as if it were width: 316px;, I need him to fill the whole screen, it’s missing a little hair, but it doesn’t fill.

And I need a spacing of 10px for each column less the first column.

My html and css code:

<div class="works">
  <h2>Serviços</h2>

  <div class="works-boxes">
    a
  </div>

  <div class="works-boxes">
    a
  </div>

  <div class="works-boxes">
    a
  </div>
</div>

CSS

.works-boxes {
    width: 316.66667px;
    margin-top: 15px;
    float: left;
    background-color: #ddd;
    border: 3px solid #fff;
}

Answer 1

If the space is 10px, there is nothing to complicate, You can divide the 950px.

• 310px per column

• 10px margin

See in "whole page mode":

div {
  box-sizing: border-box;
  padding:0;
  margin:0;
}

.works {
  background:#ff0;
  width:950px;
  overflow:auto;
}

.works-boxes {
  width:310px;
  float:left;
  margin-left:10px;
  background:#fc0;
  border:1px solid blue;
}

.works-boxes:first-of-type {
  margin-left:0;
}
  

<div class="works">
  <h2>Serviços</h2>

  <div class="works-boxes">
    a
  </div>

  <div class="works-boxes">
    a
  </div>

  <div class="works-boxes">
    a
  </div>
</div>

Points of interest:

• box-sizing: border-box; - This is so that the padding and the edges do not interfere with the accounting of the measurements. Edges shall be included in original measure, and not added.

• .works-boxes:first-of-type - this serves to not have the 10px before the first box. If you do not want to use this type of selector, just use something like class="works-boxes first", and use the .first as selector.

• overflow:auto; - without this, the float causes the divinternal s escape from the .works, disrupting the use of space.

The rest is decoration, for you to better visualize on screen what is happening.

Depending on "pixel rounding" is usually asking for a headache.