Styling multiple labels on a single form

Hi everyone, have been doing some CSS basics for a while now and recently have just started working on a form that will have a mass of entries all of which need to be filled in.

Now the problem I have now is that I need to create mutiple label setups in CSS.

So the form is laid out like this >>



And as you can see the Yes checkbox needs moving over to allow the label to show fully.

The CSS is this >>

/* Form styles */
div.form-container { margin: 10px; padding: 2px; background-color: #FFF; border: #EEE 1px solid; }

p.legend { margin-bottom: 1em; }
p.legend em { color: #C00; font-style: normal; }

div.errors { margin: 0 0 10px 0; padding: 5px 10px; border: #FC6 1px solid; background-color: #FFC; }
div.errors p { margin: 0; }
div.errors p em { color: #C00; font-style: normal; font-weight: bold; }

div.form-container form p { margin: 0; }
div.form-container form p.note { margin-left: 255px; font-size: 90%; color: #333; }
div.form-container form p.note2 { margin-left: 325px; font-size: 90%; color: #333; }
div.form-container form fieldset { margin: 10px; padding: 5px; border: #DDD 1px solid; }
div.form-container form legend { font-weight: bold; color: #666; }
div.form-container form fieldset div { padding: 0.25em 0; }
div.form-container label,
div.form-container span.label { margin: 0px 10px 0px 0px; width: 230px; display: block; float: left; text-align: right; position: relative; }
div.form-container label.error, 
div.form-container span.error { color: #C00; }
div.form-container label em, 
div.form-container span.label em { position: absolute; right: 0; font-size: 120%; font-style: normal; color: #C00; }
div.form-container input.error { border-color: #C00; background-color: #FEF; }
div.form-container input:focus,
div.form-container input.error:focus, 
div.form-container textarea:focus {	background-color: #FFC; border-color: #FC6; }
div.form-container div.controlset label, 
div.form-container div.controlset input { display: inline; float: none; }
div.form-container div.controlset div { margin-left: 170px; }
div.form-container div.buttonrow { margin-left: 180px; }

Code (markup):

And the HTML on the page >>

<div><label for="dayphone">Your Daytime Phone Number</label><input type="text" name="dayphone" id="dayphone" /></div>
						
</fieldset>
<fieldset>
<legend>Previous Address</legend>
<div><label for="paddressyn">Have you moved home in the last 12 months?</label><input type="checkbox" name="paddressyn" id="paddressyn" />Yes</div><br />

HTML:

I have attempted to add label2 as a CSS value in attempt to style it, BUT it doesn't work.

So how do I go about making an extra label style within the current page?

Many thanks in advance

 

Changing to "class" would solve the problem.

 

Yeah, do it with classes or explicit ID's.

Another possibility would be styling of the form via jQuery plugins like jQtransform, Uniform or FormOne.