Developer Forum

Is it possible with CSS to prevent this wrapping alignment with a checkbox
with a nested label?


[ ] This is the label of the
checkbox that wraps beneath it


I'd prefer it looked like this, with a flush left margin:


[ ] This is the label of the
checkbox that stays flush on its left margin

That is, the letter "T" of "This" is directly above the "c" of "checkbox",
rather than the INPUT [ ] being directly above the word "checkbox".

Can this flush left margin, with long labels that wrap, be achieved with
this markup? It seems it can't be done without unnesting the label from the
INPUT and wrapping INPUT and LABEL in separate DIVs.

<div class="chkitem">
<input id="box9221" type="checkbox" class="chkbox">
<label>
<a id="9221" href="http:/www...">This is the label ...</a>
</label>
</input>
</div>

Thanks for any help!
TR

There's no such thing as </input>. Also, you left out the "for"
attribute of the LABEL tag, so there's no indication whatsoever what
field it's supposed to apply to.

You want something like:

div.chkitem { width: 30em; }
div.chkitem label { float: right; width: 28em; }
input.chkbox { width: 2em; }

...

<div class="chkitem">
<label for="box9221">
<a id="9221" href="http:/www...">This is the label ...</a>
</label>
<input id="box9221" type="checkbox" class="chkbox">
</div>

OR

div.chkitem { width: 30em; }
div.chkitem label { display: block; margin-left: 2em; }
input.chkbox { float: left; width: 2em; }

...

<div class="chkitem">
<input id="box9221" type="checkbox" class="chkbox">
<label for="box9221">
<a id="9221" href="http:/www...">This is the label ...</a>
</label>
</div>

[...]

That ID is invalid - names and IDs must start with a letter.

<URL: http://www.yqcomputer.com/ #type-name>


In W3C conforming browsers, if a label has no 'for' attribute, it is
associated with its contents.

"for = idref [CS]
"This attribute explicitly associates the label being defined with
another control. When present, the value of this attribute must be
the same as the value of the id attribute of some other control in
the same document. When absent, the label being defined is
associated with the element's contents."

<URL: http://www.yqcomputer.com/ #adef-for>

However, IE does not conform in regard to the last statement.

[...]



--
Rob

Right, but in the OP's code the control isn't inside the LABEL element
either. Therefore, the label text isn't associated with the control,
rendering it functionally useless.