title: Space between two divs in the same row
body: <p>I have this pretty simple code - <a href="http://jsfiddle.net/vBngZ/6/" rel="nofollow"><strong>fiddle here</strong></a>.</p>
  
  <p>CSS:</p>
  
  <pre><code>.subcontent &gt; div {
      display: table-cell;
  }
  .orangebox {
      width: 55%;
      background-color: red;
      padding-top: 6px;
  }
  .bluebox {
      width: 43%;
      background-color: blue;
      padding-top: 60px;
  }
  .spacer{
      width: 1%;   
  }
  </code></pre>
  
  <p>Well, in the code you can see two type of boxes, one with the style "orangebox" and another one beside it in the same line with the style "bluebox", and both have the style "display: table-cell".<br>
  Between these two boxes there's the "spacer" that place space between them with the width 1%.<br>
  The only problem comes when you zoom in/out in the webpage(CTRL + or -), the spacer on zoom out start to get bigger than 1%(you can realize it easily), and on zoom out the spacer get smaller with the width and when you zoom in deeply the spacer disappear and the two boxes overlap.<br>
  Is there any solution to set the space between the two boxes a fixed space?</p>