CSS and radio buttons - html

Question

I'm close but I can't get my radio buttons to line up next to a label.
I've change the css a million times but I can't seem to get all my text boxes, radio buttons and commment box to line up under each other. Specifically, the second radio button isn't lining up with the rest of the stuff.
Any ideas?
Appreciate it!
Here's the code in action: http://jsfiddle.net/NpJ55/
My html and css:
<fieldset>
<label for="name" class="formlabel">Name:</label>
<input id="fName" name="name" type="text" class="forminput" />
<label for="co" class="formlabel">Company:</label>
<input id="fCo" name="co" type="text" class="forminput" />
<label for="email" class="formlabel">Email:</label>
<input id="fEmail" name="email" type="text" class="forminput" />
<label for="phone" class="formlabel">Phone:</label>
<input id="fPhone" name="phone" type="text" class="forminput" />
<label for="contact" class="formlabel">Contact:</label>
<div id="radio_form">
<input id="radio_form_1" name="Sales" type="radio" value="Sales" />
<label for="radio_form_1">Sales</label>
<input id="radio_form_2" name="Technical" type="radio" value="Technical" />
<label for="radio_form_2">Technical</label>
</div>
<label for="name" class="formlabel">Comments:</label>
<textarea name="comments" rows="5" cols="50" class="forminput"></textarea>
<input id="submit" name="submit" type="submit" class="forminput" value="Submit" />
</fieldset>
.formlabel {
clear:left;
display:block;
float:left;
margin:0 0 1em 0;
padding:0 0.5em 0 0;
text-align:right;
width:8em;
}
.forminput {
float:left;
margin:0 0.5em 0.5em 0;
}
fieldset {
-webkit-border-radius:8px;
-moz-border-radius:8px;
border-radius:8px;
}
input, textarea {
-moz-border-radius:5px;
border-radius:5px;
border:solid 1px #999;
padding:2px;
}
#submit {
background:grey;
height:30px;
width:100px;
border:1px;
color:white;
font:family:Arial;
font-weight:bold;
font-size:15px;
cursor:pointer;
}
#submit:hover {
background:#4498e1;
}
#radio_form input {
float: left;
}
#radio_form label {
float: left;
}
#radio_form label + input {
clear: both;
}

Answer 1

Well - without making too many changes... http://jsfiddle.net/billymoon/NpJ55/3/
#radio_form{
float: left;
}
And drop the #radio_form ... rules!

Answer 2

Remove the rule:
#radio_form label + input {
clear: both;
}
jsFiddle example

Answer 3

Here's a Fiddle
#radio_form {
float: left;
margin-bottom: 13px;
}
input[type="radio"] {
display: block;
margin: 3px 7px 0 0;
}

Answer 4

You can avoid having to fight with floats by using inline-block instead
http://jsfiddle.net/NpJ55/8/
.fieldwrap {
margin: 15px 0;
}
.formlabel {
display: inline-block;
vertical-align: middle;
text-align:right;
width:8em;
font-size: 24px;
}
.radiolabel {
display: inline-block;
vertical-align: middle;
font-size: 20px;
margin-right: 15px;
}
.radio {
display: inline-block;
vertical-align: middle;
}
.forminput {
display: inline-block;
vertical-align: middle;
}

Answer 5

Or conversely, add the rule:
#radio_form {
float: left;
}
Fiddle