CSS: <label> ignores width styling

hughes · #1 (**permalink**) 08-15-2008, 07: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** · #2 (**permalink**) 08-18-2008, 01: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 · #3 (**permalink**) 08-18-2008, 06: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 · #4 (**permalink**) 10-27-2009, 07:53 PM

This is because the label is an inline element.

Hope it helps.

Uncle Dog · #5 (**permalink**) 10-27-2009, 08: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 Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
CSS styling for HR	ArthurKay	Graphics & Design Discussion Forum	3	09-09-2007 08:19 AM
Styling <ul> as <select>with CSS	thindenim	Graphics & Design Discussion Forum	2	06-05-2007 04:45 PM
Styling Content with and without CSS	Dcrux	Content Discussion Forum	19	02-07-2006 06:30 PM
Google Ignores <h1> tag	janeth	Google Discussion Forum	84	10-07-2004 08:40 PM
Google Ignores Robots.txt	jestep	Google Discussion Forum	1	09-03-2004 01:39 PM