CODEWITHSUNDEEP
htmlcss
Dexter Schneider
Dexter Schneider

Reputation: 2510

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

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

Upvotes: 4

Views: 14789

Answers (2)

Luca
Luca

Reputation: 9705

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;
}

Upvotes: 2

Jonathan Nicol
Jonathan Nicol

Reputation: 3298

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>

Upvotes: 3

Related Questions