title: browser zoom out breaks page layout
body: <p>I am having trouble when i zoom out my page in browser.</p>
  
  <p>this is a simple page, body has a width of 970px, and devided into 2 parts, left and right. Left one is 300px and float to left with margin-right 10px, right one is 660px, and float right. This is ok when i zoom in or zoom out.</p>
  
  <p>but when i change left width to 298px, and add right width to 658px, add 1px border to both parts, though it is ok in normal size, but when i zoom out(ctrl+ mouse wheel down) to 90%, the right part drop down and breaks the layout. You can see here for detail:<a href="http://jsfiddle.net/yuuuuc/zSw6r/" rel="nofollow">jsfiddle</a></p>
  
  <pre><code>&lt;body&gt;
      &lt;style&gt;
      &lt;/style&gt;
      &lt;div id='left'&gt;left&lt;/div&gt;
      &lt;div id='right'&gt;right&lt;/div&gt;
  &lt;/body&gt;
  </code></pre>