Webmaster Forum / HTML, CSS, Scripts / CSS / May 2005

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