> Hi - I was working on a tutorial and they suggested adding 'clear:
> left;' to the descendent selector below in order to remove the
> problem of next label/question ( in this case: 'Rate your apartment
> farming skills' ) wrapping around the float in case where the text for
> the question/label before runs more than one line, as is the case with
> the second label.
> Although this problem is fixed, but now I am running into another
> problem in that the next 'input types' ( Novice, Intermediate, and
> Advanced ) are wrapping around the long text. How can I best resolve
> this - thanking in advance, Naz.
>
>
> #subForm .label {
> float: left;
> width: 230px;
> margin-right: 10px;
> text-align: right;
> font-weight: bold;
> clear: left;
> }
>
> .........
>
>
> <form id="subForm" name="subForm" method="post" action="">
> <p><label for="name" class="label">What is your
name?</label>
> <input type="text" name="name" id="name"
/></p>
> <p><label for="email" class="label">What is your email
> address? ....There's one last step for these labels. Because they're
> floated to the left, if the
> text runs more than one line, the question that follows will also try
> to wrap around to the right.</label> /* .......SECOND LABEL */
> <input type="text" name="email" id="email"
/></p>
> <p><span class="label">Rate your apartment farming
skills</span>
> <label>
> <input name="skill" type="radio" value="novice"
> />Novice</label>
> <label>
> <input name="skill" type="radio"
value="intermediate" /
> >Intermediate</label>
> <label>
> <input name="skill" type="radio" value="advanced"
> />Advanced</
> label>
> </p>
>
> .............
> </form>
Try to you use a fieldset instead of a p to wrap the radio buttons and use
clear:left on that fieldset. That you should fix your float problem as
fieldsets create a new block-formatting context and will also contain the
floats.
Also, using fieldset is more semantic than using paragraphs for this.
--
Regards,
Thierry | http://www.TJKDesign.com
______________________________________________________________________
css-discuss [[email protected]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
