fit div width to content and not to parent

Question

I want to make a label for a button that I have. My problem is that the label is wider then the button. I currently have it done like this (simple example):

<div class="parent_container_the_icon">
    <div class="label">
        This is the label text
    </div>
<div>

The CSS:

.parent_container_the_icon {
    height: 50px;
    width: 50px;
    float: left;
}

.label {
    display: block;
    position: absolute;
    white-space: nowrap;
}

What I want is for the label to take the width of the label text itself without wrapping the text. At the moment it doesn't wrap the text, but I get an overflow of the text in the label box as that box only takes the maximum width of the container.

How can I force the label div to fit the size of the text and not inherit the width of the parent?

Answer 1

I think you had exactly what you wanted. Perhaps check in another browser?
This is your code: jsfiddle

Answer 2

HTML:

 <div class="parent_container_the_icon">
      <div class="label">
           This it the label text
      </div>
 <div>​

CSS:

.parent_container_the_icon {
    height: 50px;
    min-width: 50px; /*<== changed width to min-width*/
    float: left;
}

.label {
    /*removed position:absolute*/
    display: block;
    white-space:nowrap;
}

Answer 3

You can use white-space: nowrap; property in a parent class and width: 100%; in a child.

I hope you find this useful.