title: Inline content inside div, without breaking a line
body: <p><a href="http://jsfiddle.net/FhhP4/" rel="nofollow">http://jsfiddle.net/FhhP4/</a> </p>
  
  <p>Is it possible to get all this spans in one line, without breaking the 30px height?
  I want to get a slider on  if  has content which is widther than 300px.</p>
  
  <p>Content inside line div will be generated and it have to be "float:left" elements</p>
  
  <p>Only css and hmtl</p>
  
  <pre><code>    &lt;div id="box"&gt;
      &lt;div class="line"&gt;
      &lt;span class="icon"&gt;&lt;/span&gt;
      &lt;span class="icon"&gt;&lt;/span&gt;
      &lt;span class="icon"&gt;&lt;/span&gt;
      &lt;span class="icon"&gt;&lt;/span&gt;
      &lt;span class="icon"&gt;&lt;/span&gt;
      &lt;span class="labelx"&gt;Label TXT&lt;/span&gt;
      &lt;/div&gt;
      &lt;div class="line"&gt;
      &lt;span class="icon"&gt;&lt;/span&gt;
      &lt;span class="icon"&gt;&lt;/span&gt;
      &lt;span class="icon"&gt;&lt;/span&gt;
      &lt;span class="labelx"&gt;Label TXTwergwergwergweg&lt;/span&gt;
      &lt;/div&gt;
      &lt;/div&gt;
  
      #box {
      width:200px;
      height:500px;
      border:1px solid #000;
      overflow:auto;
      }
  
      .line {
      height: 30px;
      width: 100%;
      background:#eee;
      }
  
      .icon {
      float:left;
      width:40px;
      height:30px;
      background:#000;
      }
  </code></pre>