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 :)

Share or Bookmark

Share or Bookmark this page using the following services. You will need to have an account with the selected service in order to post links or bookmark this page.

Subscribe or Follow

Subscribe via RSS or email, or follow me on Facebook or Twitter below. The RSS icon takes you through to Feedburner where you can select the service or application to use.

Comments