title: Block element displaying as Inline (positioned absolute, left)
body: <p>I have a container and an inner block-level element (<a href="http://jsfiddle.net/wjLc2/1/" rel="nofollow">fiddler</a>):</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="container"&gt;
      &lt;span&gt;Something is written here&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>#container {
      position:relative;
      width:300px;
      height:20px;
      background:blue;
  }
  
  #container span {
      display:block;
      position:absolute;
      left:250px;
      background:green;
      color:white;
  }
  </code></pre>
  
  <p>Why is <code>#container span</code> words are splitted by line, instead of being one line? Please note, that if I change the position from <code>left</code> to negative right - <code>right:-20px;</code> - the message is no longer splitted. Why? I can't use right since my messages regardless of length should start from the same point on the right side of container block. The message won't also be splitted if I specify <code>width</code>, but I can't do that either since I don't know in advance the length of the message</p>