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 🙂
