How to set width of DIV to span with text inside it (so not fixed)

Question

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?

My code:

CSS:

<style>
.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;
}
</style>

HTML:

<div class="container">
  <div class="flying-text active-text">Text1</div>                        
  <div class="flying-text">Text2</div>                        
  <div class="flying-text">Text3</div>                      
</div>​

Thank You

Answer 1

A couple of suggestions:

1. Float the divs. e.g. if you gave the .flying-text elements a float:left declaration then they would 'shrink wrap' to their contents. (You would also need a clear:left declaration to clear floats).

2. Wrap the text in an inline or inline-block element (such as a span), and set your background color on the span. e.g. <div class="flying-text active-text"><span>Text1</span></div>