div not expanding with text

Question

HTML Code

<div class="container">
    <div class="tip_text">D</div>
    <div class="tip_content">test</div>
</div>

<br /><br /><br />

<div class="container">
    <div class="tip_text">D2</div>
    <div class="tip_content">test test test test test test test</div>
</div>

CSS Code

.container{
    position: relative;
    float: left;
}

.tip_text{
    position: relative;
    float:left;
    width: 130px;
    height: 30px;
    margin: 0px;
    padding: 2px;
    text-align: left;
    line-height: 28px;
    font-size: 16px;
    font-weight: bold;
    border: 1px solid #acacac;
    cursor:help;
}


.tip_content{
    background: #333;
    color: #fff;
    padding: 10px 15px;
    z-index: 98;
    min-height: 15px;
    position:absolute;
    left: 100%;
    font-size: 12px;

}

The above code has the following issue which I am trying to solve. The "tip_content" divs do not expand when a lot of text is placed into them. I cannot figure out why. I do not want to have a set width, I would prefer that they grow based on the amount of text put within. This should be happening by default as is the behavior of divs, but in this case it is not. If anyone has insight into this issue it would be greatly appreciated.

http://jsfiddle.net/Qyrjf/

Answer 1

white-space: nowrap;

This seems to fix the problem. Here is the full code in case people are interested in the application of the solution. It is using CSS and CSS3 to create tooltips.

HTML

<div class="container">
    <div class="tip_text">D</div>
    <div class="tip_content">test</div>
</div>

<br /><br /><br />

<div class="container">
    <div class="tip_text">D2</div>
    <div class="tip_content">test test test test test test test</div>
</div>

CSS (full)

.container{
    position: relative;
    float: left;
}

.tip_text{
    position: relative;
    float:left;
    width: 130px;
    height: 30px;
    margin: 0px;
    padding: 2px;
    text-align: left;
    line-height: 28px;
    font-size: 16px;
    font-weight: bold;
    border: 1px solid #acacac;
    cursor:help;
}

.tip_text:hover + .tip_content{
    opacity: .9;
    visibility: visible;
    margin-left: 10px;
}


.tip_content:before{

    border: solid;
    border-color:  transparent #333;
    border-width: 6px 6px 6px 0;
    content: "";
    z-index: 99;
    position:absolute;
    left:-6px;
    top:12px;
}

.tip_content{
    background: #333;
    color: #fff;
    padding: 10px 15px;
    z-index: 98;
    min-height: 15px;
    float: left;
    left: 100%;
    font-size: 12px;
    position: absolute;
    white-space: nowrap;

    -moz-box-shadow: 2px 2px 2px #666;
    -webkit-box-shadow: 2px 2px 2px #666;
    box-shadow: 2px 2px 2px #666;

    opacity: 0;
    margin-left: 20px;
    visibility: hidden;

    -webkit-transition-property:opacity, visibility, margin-left;
    -webkit-transition-duration:0.2s, 0.2s, 0.1s; 
    -webkit-transition-timing-function: ease-in-out, ease-in-out, ease-in-out;

    -moz-transition-property:opacity, visibility, margin-left;
    -moz-transition-duration:0.2s, 0.2s, 0.1s;  
    -moz-transition-timing-function: ease-in-out, ease-in-out, ease-in-out;

    -o-transition-property:opacity, visibility, margin-left;
    -o-transition-duration:0.2s, 0.2s, 0.1s; 
    -o-transition-timing-function: ease-in-out, ease-in-out, ease-in-out;

    transition-property:opacity, visibility, margin-left;
    transition-duration:0.2s, 0.2s, 0.1s; 
    transition-timing-function: ease-in-out, ease-in-out, ease-in-out;

}