rodriguezserhio

https://codepen.io/anon/pen/OzqzRQ

<div class='w1'>
  <div class="w2">
    <div class='left block'>111</div>
    <div class='right block'>222</div>
    <div class='clear'></div>
  </div>
</div>


* {margin:0;padding:0;box-sizing:border-box;}
.w1{
  background-color: #888;
  width:800px;
  overflow:hidden;
}

.w2{
  position:relative;
  background-color: #ccc;
  right:-400px;
}

.block{
  width: 390px;
  float: left;
  margin:5px;
  left:-400px;
  position:relative;
}

.left  {border:1px solid #0ff;}
.right {border:1px solid #0f0;}
.clear { clear: both; }

2 обертки, одна задает цвет 1 колонке, 2 -2-й;
вторая колонка съезжает в право на ширину первой
обе колонки съезжают влево на ширину первой. как-то так...