Label tag width not working

The <label> element will not accept a width value in FireFox, and I just spent way too long finding a workaround. The label element is used to associate a text label to a form control that does not automatically have a label.

Short answer: float left makes width work on label elements.

When assigning a width to the label tag, the width value worked in Internet Explorer. FireFox disregarded the width in pixels that I assigned to the label HTML tag in my CSS file.

Label elements are in-line style elements, so technically FireFox is interpreting the CSS properly by not obeying my width declaration. In-line elements do not accept width attributes. The workaround is to force the label element to become a block level element by floating it.

Why float it when you could just declare it a block element with display: block, you ask? Because block elements will stack on top of each other without being floated, and if my original intent was to give a label a width I might be trying to distance it from something beside and not below it. You can do display: block; float: left; and achieve the same result, but if you are going to float it the display attribute is not required.

15 comments

  1. Last comment is good!!!
    This work fine and align input field in the middle of the label if the text wrap:

    label
    {
    padding: 0px 5px 0px 5px;
    width: 80px;
    overflow: hidden;
    display: inline-block;
    vertical-align: middle;
    }

Leave a comment

Your email address will not be published. Required fields are marked *