title: 1px calculation issue with browsers (sub-pixel problems)
body: <p>I think this issue is common and picked it up here in SO itself, but could not find how to solve this.</p>
  
  <p><strong>Problem</strong>: </p>
  
  <p>When you resize the window, you will notice that the height of the two images will differ by 1px at times (that is expected when browser adjusts the dimesions).</p>
  
  <p>How do I 'fix' this UI issue? I know I can do that by using a <code>flexbox</code>. But I guess there is a better solution. Could you guys jump in?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>table{
    width:100%;
    border-collapse: collapse;
  }
  img{
    display: block;
    width: 100%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table&gt;
    &lt;tr&gt;
      &lt;td&gt;&lt;img src="http://placehold.it/100x100"/&gt;&lt;/td&gt;
      &lt;td&gt;&lt;img src="http://placehold.it/100x100"/&gt;&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>or even here when I use <code>display: table</code>:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.wrapper{
    width:100%;
    display: table;
  }
  .wrapper div{
    display: table-cell;  
  }
  img{
    display: block;
    width: 100%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="wrapper"&gt;
      &lt;div&gt;&lt;img src="http://placehold.it/100x100"/&gt;&lt;/div&gt;
      &lt;div&gt;&lt;img src="http://placehold.it/100x100"/&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>Edit</strong>:
  The issue not there in Firefox browser but exists in Chrome.</p>
  
  <p>Note that the issue is not there when I use a <code>flexbox</code>:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body{
    margin: 0;  
  }
  .wrapper{
    width:100%;
    display: flex;
  }
  .wrapper div{
    flex: 1;  
  }
  img{
    display: block;
    width: 100%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="wrapper"&gt;
      &lt;div&gt;&lt;img src="http://placehold.it/100x100"/&gt;&lt;/div&gt;
      &lt;div&gt;&lt;img src="http://placehold.it/100x100"/&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>or using floats and inline-blocks:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body{
    margin: 0;  
  }
  .wrapper{
    width:100%;
    display: block;
  }
  .wrapper div{
    display: inline-block;
    float: left;
    width:50%;
  }
  .wrapper:after{
    content: '';
    display: inline-block;
    clear:both;
  }
  img{
    display: block;
    width: 100%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="wrapper"&gt;
      &lt;div&gt;&lt;img src="http://placehold.it/100x100"/&gt;&lt;/div&gt;
      &lt;div&gt;&lt;img src="http://placehold.it/100x100"/&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>