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