Calculate pixels for columns in css

Question

Calculate pixels for columns in css

Navigation

#1 by (2 votes)

1

Good people have 3 columns in a space of 950px;

I made the calculations here on the calculator 950/3 = 316,6666666666667

Only when I convert this to css:

width: 316.6666666666667px; nothing changes, it takes like it's width: 316px; , I need it to fill the whole screen, it's missing a hairpin, but it does not fill.

I need a 10px spacing for each column except 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;
}

html css

asked by anonymous 06.04.2016 / 03:33

1 answer

Blender 2.7 - Shortcut to run game engine Display sum in span

score 2 · Accepted Answer

If the space is 10px, you do not have to complicate it, you can divide it correctly by 950px.

310px per column
10px margin

See "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 borders do not disturb the counting of the measurements. The borders will be included in the original measure, not added.
.works-boxes:first-of-type - this is not to 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 .first as a selector.
overflow:auto; - without this, float causes internal div s to escape from .works , disrupting the use of space.

The rest is decoration, so you can better visualize what is happening on the screen.

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