3 резиновых блока с фиксированными отступами

[MrFreeman]

В общем, столкнулся с такой проблемой при верстке адаптивного сайта. Ширина сайта плавает в диапазоне от 320 до 1600px. Имеются 3 блока. Необходимо, чтобы эти блоки занимали всю предоставленную область и при этом имели одинаковые ширину(auto) и интервалы(30px). При уменьшении размера окна блоки должны сжиматься по ширине, а отступы оставаться неизменными.

Реализация без flexbox'a.

Нужна Ваша помощь, уважаемые форумчане! Буду очень благодарен, если поможете!

 

 

[AlexZaw]

<div class="wrapper">
  <div class="row">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
</div>

*{
  margin: 0;
}
.wrapper{
    max-width: 1600px;
    overflow: hidden;
}
.row{
  font-size: 0;
  margin: 0 -15px;
  background: #0f0;
}
.box{
  font-size: 16px;
  box-sizing: border-box;
  margin: 0 15px;
  width: calc(33.33% - 30px);
  height: 100px;
  display: inline-block;
  border: 1px solid;
  background: gold;
}

 

[klierik]

Как вариант: https://jsfiddle.net/klierik/0qqqj14x/1/

[MrFreeman]

2 минуты назад, AlexZaw сказал:

<div class="wrapper">
  <div class="row">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
</div>

*{
  margin: 0;
}
.wrapper{
    max-width: 1600px;
    overflow: hidden;
}
.row{
  font-size: 0;
  margin: 0 -15px;
  background: #0f0;
}
.box{
  font-size: 16px;
  box-sizing: border-box;
  margin: 0 15px;
  width: calc(33.33% - 30px);
  height: 100px;
  display: inline-block;
  border: 1px solid;
  background: gold;
}

 

Благодарю!