title: CSS div moves when when zooming
body: <p>I am trying to arrange a grid layout.</p>
  
  <p>The last div moves when zooming out. Also a white line appear between the right side panel and last content div when I zoom in.</p>
  
  <p>Am I doing something crucially wrong with my CSS and layout?</p>
  
  <p>Cheers,
  Owain</p>
  
  <hr>
  
  <pre><code>#container {
      position: relative;
      width: 827px;
      height: 580px;
      float: left;
  }
  
  .side-pannel {
      position: relative;
      width: 60px;
      height: 580px;
      background-color: #ba55d3;
      float: left;
  }
  
  .two-item-column {
      position: relative;
      float: left;
  }
  .column-border-middle {
      border-right: 1px solid black;
  }
  
  .item1 {
      width: 206px;
      height: 288px;
      background: #666; 
  }
  .item2 {
      width: 206px;
      height: 291px;
      background: #666;
      border-top: 1px solid black; 
  }
  </code></pre>
  
  <hr>
  
  <pre><code>&lt;div class="side-pannel" id="left-pannel"&gt;&lt;/div&gt;
  &lt;div id="container"&gt;
      &lt;div class="two-item-column" &gt;
          &lt;div class="item1 column-border-middle"&gt;&lt;/div&gt;
          &lt;div class="item2 column-border-middle"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="two-item-column" &gt;
          &lt;div class="item1 column-border-middle"&gt;&lt;/div&gt;
          &lt;div class="item2 column-border-middle"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="two-item-column" &gt;
          &lt;div class="item1 column-border-middle"&gt;&lt;/div&gt;
          &lt;div class="item2 column-border-middle"&gt;&lt;/div&gt;
      &lt;/div&gt;
         &lt;div class="two-item-column" &gt;
          &lt;div class="item1"&gt;&lt;/div&gt;
          &lt;div class="item2"&gt;&lt;/div&gt;
      &lt;/div&gt;   
  &lt;/div&gt;
  &lt;div class="side-pannel" id="right-pannel"&gt;&lt;/div&gt;
  </code></pre>