title: CSS div float left and right nowrap
body: <p>A little background:
  I am working on a header which spans the entire with on the top of my webpage. I would like the current username, a logout button, etc. to be floated to the right in the header, and I would like the logo and some navitems to be on the left. When the browser window shrinks such that the left items and the right items collide, I do NOT want them to wrap. I have the header-container div set to overflow: auto, so I would like it to start scrolling.</p>
  
  <p>The question:
  Even when I have a div float:left and a div float:right both with display:inline-block, and the parent with white-space:no wrap - the wrap!!! By chance I figured out I could get it to work by enclosing the yet another div also with display:inline-block. Why is this???</p>
  
  <p>Below is my code and a working jsfiddle to show both the working setup, and setup which wraps. I don't understand why I need the extra div.
  <a href="http://jsfiddle.net/klyngbaek/tNHLL/9/" rel="noreferrer">http://jsfiddle.net/klyngbaek/tNHLL/9/</a></p>
  
  <p><em>When I shrink the window, I do not want to the second blue rectangle to drop to a new line</em></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;h2&gt;With extra inline-block dive. The blue rectangles do not wrap.&lt;/h2&gt;
  &lt;div class="wrapper nowrap"&gt;
      &lt;div class="second-wrapper"&gt;
          &lt;div class="floating float-left"&gt;[logo] | home | [navitem1] | [navitem2]&lt;/div&gt;
          &lt;div class="floating float-right"&gt;[username] | logout&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;h2&gt;Without extra inline-block dive. The blue rectangles do wrap.&lt;/h2&gt;
  &lt;div class="wrapper nowrap"&gt;
      &lt;div class="floating float-left"&gt;[logo] | home | [navitem1] | [navitem2]&lt;/div&gt;
      &lt;div class="floating float-right"&gt;[username] | logout&lt;/div&gt;
      &lt;div class="clearfix"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.wrapper {
      border:#333;
      margin-bottom:;
  }
  .second-wrapper {
      border:;
      display:inline-block;
      min-width: 100%;
  }
  .nowrap {
      white-space: nowrap;
  }
  .clearfix {
      clear: both;
  }
  .floating {
      background: lightblue;
      border:;
      height:;
      padding:}
  .float-left {
      float: left;
  }
  .float-right {
      float: right
  }
  </code></pre>
  
  <p>Or perhaps there is a better way to accomplish what I want.</p>
  
  <p>Thanks in advance!</p>
  
  <p>edit: updated jsfiddle link</p>