title: How to set width of DIV to span with text inside it (so not fixed)
body: <p>I want to know how you can set the width of a DIV to span to the size of the text in the div element. Note that the text must be in a div, I cannot put it in a span, and using Display:inline-block messes with my javascript function. The other problem is that the DIV element has a background (see classes flying-text) and that background spans with the parent element width and not the text width inside the div. How to do that?</p>
  
  <p>My code:</p>
  
  <p>CSS:</p>
  
  <pre><code>&lt;style&gt;
  .container{
  width:910px;
  height: 380px;
  background: url(http://v4m.mobi/php/images/home_back.jpg) center no-repeat;
  
      margin:0 auto;
      color:#FFF;
  
      background-color: #000;
  }
  .flying-text{
      margin-left:-100px;
      color: #fff;
      font-size: 20px;
      height: 50px;
      background: rgba(0, 0, 0, 0.5);
      -webkit-border-radius: 0px 10px 10px 10px;
      border-radius: 0px 10px 10px 0px;
      -moz-border-radius: 0px 10px 10px 0px;
      text-align: left;
      vertical-align: middle;
      padding: 5px 0px;
  }
  &lt;/style&gt;
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;div class="flying-text active-text"&gt;Text1&lt;/div&gt;                        
    &lt;div class="flying-text"&gt;Text2&lt;/div&gt;                        
    &lt;div class="flying-text"&gt;Text3&lt;/div&gt;                      
  &lt;/div&gt;​
  </code></pre>
  
  <p>Thank You</p>