title: Getting a horizontal navbar to stay on one line
body: <p>Currently there is nothing wrong with my navbar when viewed correctly. However, me being the OCD guy that I am, I want to make sure I have improper, or abnormal viewing solved as well.</p>
  
  <p>Right now, my navbar consists of a single horizontal line with links separated by a | and some CSS rollover highlighting. Simple setup that gets the job done quite well in my opinion. However, if I zoom in, eventually I will reach a stage where the last link will have no more room, and go down to the next line. Doesn't look good, obviously. I tried putting a max-width:100% on it, but it didn't make a difference.</p>
  
  <p>Relevant code is as follows:</p>
  
  <pre><code>&lt;div class="navbarwrapper"&gt;
      &lt;div class="navbar"&gt;
          | &lt;a href="" class="navbar"&gt;&lt;/a&gt; |
          &lt;a href="" class="navbar"&gt;&lt;/a&gt; |
          &lt;a href="" class="navbar"&gt;&lt;/a&gt; |
          &lt;a href="" class="navbar"&gt;&lt;/a&gt; |
          &lt;a href="" class="navbar"&gt;&lt;/a&gt; |
          &lt;a href="" class="navbar"&gt;&lt;/a&gt; |
          &lt;a href="" class="navbar"&gt;&lt;/a&gt; |
      &lt;/div&gt;
  &lt;/div&gt;
  
  .navbarwrapper {
      margin-bottom: 10px;
      text-align: center;
      margin-left: auto;
      margin-right: auto;
      min-width: 800px;
  }
  .navbar {
      padding: 10px;
  }
  </code></pre>
  
  <p>Like I said, it works fine under normal circumstances, but if you zoom on (or have a low resolution, I'm assuming), the last link flows over to the second line.</p>