title: Floating Div Breaks out on Zoom
body: <p>I have a sidebar with float: left, in that sidebar is a box with some text in it.
  Right next to the sidebar is a wrapper that has content in it.
  If I zoom in everything gets sized nicely but the sidebar breaks and jumps to the middle of the wrapper if I zoom it to max.
  Actually with my navbar, the last item also breaks and appears under the navbar...</p>
  
  <p>Check out a demo here ( sorry if this is not allowed ): <a href="http://www.ascendvault.com" rel="nofollow">http://www.ascendvault.com</a></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="navbar"&gt;
      &lt;div id="navbar_items"&gt;
          &lt;div class="navbar_item"&gt;&lt;a href="#"&gt;HOME&lt;/a&gt;&lt;/div&gt;
          &lt;div class="navbar_item"&gt;&lt;a href="#"&gt;GUIDES&lt;/a&gt;&lt;/div&gt;
          &lt;div class="navbar_item"&gt;&lt;a href="#"&gt;NPC&lt;/a&gt;&lt;/div&gt;
          &lt;div class="navbar_item"&gt;&lt;a href="#"&gt;ENEMIES&lt;/a&gt;&lt;/div&gt;
          &lt;div class="navbar_item"&gt;&lt;a href="#"&gt;ITEMS&lt;/a&gt;&lt;/div&gt;
          &lt;div class="navbar_item"&gt;&lt;a href="#"&gt;SPELLS&lt;/a&gt;&lt;/div&gt;
          &lt;div class="navbar_item"&gt;&lt;a href="#"&gt;COMMUNITY&lt;/a&gt;&lt;/div&gt; &lt;!-- this falls under #navbar on max zoom --&gt;
      &lt;/div&gt;
  &lt;/div&gt;  
  &lt;div id="sidebar"&gt;&lt;!-- the sidebar appears on the content_wrapper on max zoom --&gt;
      &lt;div class="side_box"&gt; 
          &lt;div class="side_box_title"&gt;&lt;span&gt;VAULT FEED&lt;/span&gt;&lt;/div&gt;
          &lt;div class="side_box_content"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="content_wrapper"&gt;
      &lt;div id="content_wrapper_middle"&gt;
          &lt;%content%&gt;
      &lt;/div&gt;
      &lt;div id="content_wrapper_bottom"&gt;
          &lt;div id="footer"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;  
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>#navbar {
      height: 30px;
  }
  
  
  .navbar_item {
      float: left;
      padding-top: 5px;
      padding-left: 10px;
      padding-right: 10px;
  }
  
  #sidebar {
      max-width: 200px;
      margin-top: 1%;
      margin-left: 1%;
      float: left;
  }
  
  #content_wrapper {
      margin-left: 230px;
      margin-right: 25px;
      margin-top: 1%;
  }
  </code></pre>