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

css, html

Solution

you are trying to get your to fill the container's width, but you want them to be wrapping the contained text. these are two opposite behaviours.

keep the div as they are, and wrap the text in a (semantically correct) `<p>` tag. then your css will become:

.flying-text{
    margin-left:-100px;
    color: #fff;
    font-size: 20px;
    height: 50px;
    text-align: left;
    vertical-align: middle;
    padding: 5px 0px;
}

.flying-text p {
    float: left;
    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;
}

Problem

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

Original source