title: Absolute positioning without content wrapping
body: <p>I'm experiencing a nasty css problem I can't seem to solve.
  I want to position a wrapper inside a container with the <code>left</code> property (in the positive direction; negative seems to work for some reason) without the content inside to start wrapping up.
  Here is a <strong><a href="http://jsfiddle.net/Zp8Yb/3/" rel="nofollow">jsfiddle</a></strong> for the following HTML and CSS.</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div id="container"&gt;
      &lt;div id="wrapper"&gt;
          &lt;div id="one"&gt;&lt;/div&gt;
          &lt;div id="two"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <pre class="lang-css prettyprint-override"><code>#container {
      width: 200px;
      height: 200px;
  
      position: relative;
      border: 1px solid #000;
  
      /*white-space: nowrap;*//*Works for chrome, but not for firefox*/
  }
  
  #wrapper {
      position: absolute;
      /*left: 100px;*/
  }
  
  #one, #two {
      width: 80px;
      height: 80px;
      background-color: #000;
  
      margin: 10px;
      float: left;
  }
  </code></pre>
  
  <p>If you uncomment the <code>left: 100px;</code>, you'll notice the two boxes get moved <strong>but also</strong> wrapped. In chrome, this can be fixed using <code>white-space: nowrap;</code> on the container. It doesn't work for Firefox, though, and also affects the text content.  I have tried removing <code>position: relative;</code> from the container and calculating the right offset with Javascript but that's somewhat inconvenient.</p>
  
  <p><strong>Edit:</strong> It does work with CSS3's <code>transform: translateX(100px)</code> but I'd still prefer the <code>left</code> variant.</p>