Corey Salzano

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.

Comments

15 responses to “Label tag width not working”

  1. James

    Thanks for the info. Saved me a good bit of time!

    James

  2. ebaddouh at gmail dot com

    I just had the same problem. It worked for me too.. thx

  3. VitaminJeffâ„¢

    Thanks for the save! :D

  4. Jenny

    You rock! :-D

  5. Hannah

    Thanks a lot! :p

  6. Vignesh

    thanks a lot ;)

  7. Soumya

    I faced the same problem. Thanks for the fix.

  8. ivan lackovic

    thanx a lot!!!

  9. hi

    {display: inline-block;} works too. No float needed and it stays inline…

  10. Paolo

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

  11. Sanchit Gupta

    I experienced same problem. Thanks for the post.

  12. derin

    Comments

    width made working by float left;

    thanks

  13. nandy

    Thanks a Lot…..

  14. Caitlin Coughlin

    Something like three years later, this helped me out too. Thanks! :-)

  15. ZEE

    Same problem… thanks for the enlight… ;-)