title: css challenge when rotating (transform:rotate) block - width auto
body: <p>I've a little problem with block rotated 90 degrees using css transform.</p>
  
  <p>Challenge lies in the following:</p>
  
  <p>Rotated block is inside 40px vertical column. This means that width of the rotated block in auto mode is not more than 40px. So chunk of text is not placed on one continues line, instead line breaks appear.</p>
  
  <p>To better visualise this problem please check this fiddle I created: <a href="http://jsfiddle.net/F7CEX/">http://jsfiddle.net/F7CEX/</a></p>
  
  <pre><code>#open_nav {
      font-family: 'Exo', sans-serif;
      font-weight: 300;
      font-size: 1em;
      display: block;
      color: #333333;
      text-decoration: none;
      background: url("img/menu-s.png") no-repeat 18px -30px transparent;
      padding-left: 50px;
      padding-right: 19px;
      line-height: 40px;
      position: absolute;
      bottom: 18px;
      -webkit-transform: rotate(-90deg);
      -webkit-transform-origin: 20px;
      -moz-transform: rotate(-90deg);
      -moz-transform-origin: 20px;
      -ms-transform: rotate(-90deg);
      -ms-transform-origin: 20px;
      -o-transform: rotate(-90deg);
      -o-transform-origin: 20px;
      transform: rotate(-90deg);
      transform-origin
  }
  </code></pre>
  
  <p>I simply need this text to be a one liner. Any ideas?</p>