CSS: <label> ignores width styling

**hughes** · 08-15-2008, 06:35 PM

Code:

<html>
<head>
<style>
label {
	width: 5em;
	border: 1px dotted;
}
</style>
</head>

<body>
<form>
		<label for="xyz">
				XYZ:
				<input id="xyz" type="text" size="20">(additional hint)
		</label>
</form>
</body>
</html>

I added the border only so we can see the size of the label. In this example, all three parts (XYZ, the input field, the add'l hint) are laid out in one line making the label field significantly longer than 5em. However, if I add either display: block; or float: left;, it suddenly obeys they width rule and adds line breaks to put the parts in three different lines.

I'd expect that even in the default (display: inline; or no display rule as above) it breaks lines when it reaches the width limit. Why does it not do that?

And anyway, does that display or float rule not apply to how the label shows in it's containing element (form or fieldset)? Why would it affect the stuff INSIDE the label, since float is not inheritable?

Confused...

**wige** · 08-18-2008, 12:17 PM

I am not sure, but I think label is considered an inline element, and input is a block level element. Generally, label should not contain anything but the text, as it is a feature intended for accessibility, to link a string of text to a form field. (ie, a form element can not be part of it's own label)

I think for the best results the following code would do what you need:

HTML Code:

<div class="formelement">
   <label for="xyz">XYZ:</label>
   <input id="xyz" type="text" />
   (additional hint)
</div>

**hughes** · 08-18-2008, 05:15 PM

Thanks for the reply. It may have to do sth with inline vs. block-level elements. But wrapping labels around input fields is definitely allowed. W3.org, the HTML standards body, even has an example showing this technique in the HTML specs:
Forms in HTML documents
(see third example at 17.9.1 "The LABEL element")

I wanted to use this to avoid cluttering up my code with so many divs, instead just styling fieldsets and labels directly.

But anyway, yes, it does seem like <label> behaves like an inline element by default. So I guess all inline elements can't have width styles?

**lorelai** · 10-27-2009, 06:53 PM

This is because the label is an inline element.

Hope it helps.

**Uncle Dog** · 10-27-2009, 07:12 PM

I agree with wige and w3schools.com - label tags shouldn't normally contain anything other than text.

The W3.org example (no 3) you quote refers to implicit association. Notice the label tags don't contain a for attribute.

Thread: CSS: <label> ignores width styling

Thread Tools

Display

CSS: <label> ignores width styling

Re: CSS: <label> ignores width styling

Re: CSS: <label> ignores width styling

Re: CSS: <label> ignores width styling

Re: CSS: <label> ignores width styling

Similar Threads

CSS styling for HR

Styling Content with and without CSS

Firefox ignores <comment>

Google Ignores <h1> tag

Google Ignores Robots.txt

Posting Permissions