title: HTML Elements wrapping on zoom in / out
body: <p>I have list of screen names that can be filtered by letter. The Issue I am having is that when the browser window is zoomed out anywhere from 1-5 levels the z will wrap to the nextline in firefox and several letters will wrap in chrome. zoomed 5 levels out seems ok in IE. Here is the sample source:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;style&gt;
      .filters { position: absolute; background: #ff0000 0 0 no-repeat; width: 970px; height: 31px; left: 0; text-transform: uppercase; }
      .letters { float: left; margin: 2px 0 0 7px; width: 710px; height: 30px; background-color: orange;  }
      .screenname {width: 244px; background-color: green; float: left; }
      .filters .letters a { display: inline; margin: 0 14px 0 0; }
      .filters .letters a.disabled { color: #36373a; cursor: default; }
      .filters a { font: bold italic 12px/28px Arial, sans-serif; }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="filters"&gt;
          &lt;div class="screenname"&gt;
              Screen Name
          &lt;/div&gt;
          &lt;div class="letters"&gt;
              &lt;a href="#" rel="#"&gt;#&lt;/a&gt;
              &lt;a href="#" rel="A"&gt;A&lt;/a&gt;
              &lt;a href="#" rel="B"&gt;B&lt;/a&gt;
              &lt;a href="#" rel="C"&gt;C&lt;/a&gt;
              &lt;a href="#" rel="D"&gt;D&lt;/a&gt;
              &lt;a href="#" rel="E"&gt;E&lt;/a&gt;
              &lt;a href="#" rel="F"&gt;F&lt;/a&gt;
              &lt;a href="#" rel="G"&gt;G&lt;/a&gt;
              &lt;a href="#" rel="H"&gt;H&lt;/a&gt;
              &lt;a href="#" rel="I"&gt;I&lt;/a&gt;
              &lt;a href="#" rel="J"&gt;J&lt;/a&gt;
              &lt;a href="#" rel="K"&gt;K&lt;/a&gt;
              &lt;a href="#" rel="L"&gt;L&lt;/a&gt;
              &lt;a href="#" rel="M"&gt;M&lt;/a&gt;
              &lt;a href="#" rel="N"&gt;N&lt;/a&gt;
              &lt;a href="#" rel="O"&gt;O&lt;/a&gt;
              &lt;a href="#" rel="P"&gt;P&lt;/a&gt;
              &lt;a href="#" rel="Q"&gt;Q&lt;/a&gt;
              &lt;a href="#" rel="R"&gt;R&lt;/a&gt;
              &lt;a href="#" rel="S"&gt;S&lt;/a&gt;
              &lt;a href="#" rel="T"&gt;T&lt;/a&gt;
              &lt;a href="#" rel="U"&gt;U&lt;/a&gt;
              &lt;a href="#" rel="V"&gt;V&lt;/a&gt;
              &lt;a href="#" rel="W"&gt;W&lt;/a&gt;
              &lt;a href="#" rel="X"&gt;X&lt;/a&gt;
              &lt;a href="#" rel="Y"&gt;Y&lt;/a&gt;
              &lt;a href="#" rel="Z"&gt;Z&lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p></p>
  
  <p>Now put that in an HTML file and zoom out (Ctrl-) five times in both chrome and firefox. You'll see wrapping occurs. How can I avoid this? I can't increase the size of the filters div and I can see that the issue may be partially caused by the font rendering in chrome (it stops decreasing in size after a certain number of zooms). I'm open to any javascript/Jquery hacks that might work also.</p>