Solution for <label> ignoring width styling

Posted September 26th, 2009 in HTML and CSS

There are a lot of tutorials around which advocate using pure CSS for forms (and not to use tables) and these often use the <label> tag for the fieldname. An issue I have come across is that <label> is an inline element so setting the width is supposed to have no effect; in practise setting the width will work in Internet Explorer but not other browsers. This post shows the simple solution so other browsers can also assign a width to a label.

Make the label a block level element

The solution is simply to make the label into a block level element with display: block and to float it to the left so the input field remains alongside it. This is achieved like so, where the label is also set to a width of 150px:

label {
    display: block;
    float: left;
    width: 150px;
}

Personally, I almost always stick with tables for forms where the text label is alongside the field because there's a lot less messing around :)