I've been struggling to align my radio buttons next to their labels. Despite numerous changes to the CSS, I can't seem to get my text boxes, radio buttons, and comment box to line up properly. Specifically, the second radio button is causing alignment issues.
Any suggestions would be greatly appreciated!
See the code in action: http://jsfiddle.net/NpJ55/
Below is 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;
}