Responsive, percentage image gap issue

Question

Is there a workaround to get rid of the 1px gap that appears below the second image when the browser window is scaled?

Image 1 is 66.66666% wide and image 2 is 33.33333% wide - curiously, removing the 1px margin eliminates the issue, but I need the 1px gap!

I believe it is because the browser is trying to render half pixels, but surely there must be a way?

Here is the fiddle: http://jsfiddle.net/Azj7D/

HTML:

<div class="row">
  <div class="col wide">
    <img src="http://lorempixel.com/988/494/sports/5/" />
  </div>
  <div class="col">
    <img src="http://lorempixel.com/494/494/sports/5/" />
  </div>
</div>

CSS:

.row
{
  background: red;
  clear: both;
  margin: 0;
  overflow: hidden;
  padding: 0 0 1px 0;
  position: relative;
  z-index: 1;
}

.row .col
{
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  float: left;
  margin: 0 0 1px 0;
  overflow: hidden;    
  padding: 0 0 0 1px;
  position: relative;
  width: 33.33333%;
  z-index: 1;
}

.row .col.wide
{
  width: 66.66666%;
}

.row .col img
{
  display: block;
  height: 100%;
  margin: 0;
  padding: 0;
  width: 100%;
}

Many thanks for help in advance!

Answer 1

It is indeed pixel rounding. I have forked your fiddle with a solution, it's by no means beautiful but it does work: http://jsfiddle.net/X73EU/.

Using

display: table-cell

on the columns and making the second image absolutely positioned seems to do it.