HTML/CSS aligning two inputs and text underneath - html

Question

I am trying to place two input forms next to eachother and position some text underneath them. Somehow it never ends up aligned correctly. This picture shows what I am trying to do:
HTML:
<form action="#" class="cleanForm" method="POST">
<fieldset>
<input type="text" name="firstname" placeholder="first name" required>
<em>Please enter your first name</em>
<input type="text" name="lastname" placeholder="last name" required>
<em>Enter your last name</em>
<input type="email" name="email" placeholder="e-mail" required>
<em>Enter your e-mail address</em>
<input type="email" name="email2" placeholder="re-enter e-mail" required>
<em>Re-enter your e-mail address</em>
<input type="password" name="password" placeholder="password" required>
<em>Enter a password between 8 and 20 digits</em>
<input type="password" name="password2" placeholder="re-enter password" required />
<em>Re-enter the password</em>
<p>
<input type="radio" name="gender" value="Female" checked>
<label for="female">Female</label>
<input type="radio" name="gender" value="Male">
<label for="male">Male</label>
</p>
<p>
<input type="checkbox" id="agree-TOS">
<label for="agree-TOS">I have read and agree to the Terms of Service.</label>
</p>
<input type="submit" value="Create account">
</fieldset>
</form>
CSS:
form.cleanForm {
width:700px;
margin:0 auto;
}
form.cleanForm p {
margin-bottom:15px;
}
input[type="email"], input[type="password"], input[type="text"] {
font-family: Arial, Sans-Serif;
font-size: 18px;
color: #adadad;
padding: 10px;
outline:none;
float:left;
border: solid 1px #adadad;
width: 230px;
transition: all 2s ease-in-out;
-webkit-transition: all 2s ease-in-out;
-moz-transition: all 2s ease-in-out;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
-moz-box-shadow:inset 0 0 5px 5px #E6E6E6;
-webkit-box-shadow:inset 0 0 5px 5px #E6E6E6;
box-shadow:inset 0 0 5px 5px #E6E6E6;
clear: right;
}
input[type="email"]:focus, input[type="email"]:hover, input[type="password"]:focus,
input[type="password"]:hover, input[type="text"]:focus, input[type="text"]:hover {
border:1px solid #FF003F;
}
form.cleanForm em {
font-size:12px;
}

Answer 1

You're applying float:left to the <input>s, but not to the <em>s. That's why all the fields are pushed to the left, while the labels remain in the ordinary page flow.
One possible solution is wrapping both of them in a <div> and applying the float to that:
HTML:
<div class="field">
<input type="text" name="firstname" placeholder="first name" required />
<em>Please enter your first name</em>
</di>
CSS:
div.field {
float: left;
}
Also, it would be more sematically correct to use a <label> instead of an <em>.

Answer 2

I think your markup needs a redo. Use <label>s to describe form element labels, not <em>s. There's no semantic value in the emphasis. Also, you can use the labels themselves to align the form easily. Here's my code (Live Example Here):
HTML
<form action="#" class="cleanForm" method="POST">
<fieldset>
<label><input type="text" name="firstname" placeholder="first name" required>
Please enter your first name</label>
<label><input type="text" name="lastname" placeholder="last name" required>
Enter your last name</label>
<label><input type="email" name="email" placeholder="e-mail" required>
Enter your e-mail address</label>
<label><input type="email" name="email2" placeholder="re-enter e-mail" required>
Re-enter your e-mail address</label>
<label><input type="password" name="password" placeholder="password" required>
Enter a password between 8 and 20 digits</label>
<label><input type="password" name="password2" placeholder="re-enter password" required>
Re-enter the password</label>
<div id="gender">
<label><input type="radio" name="gender" value="Female" checked>
Female</label>
<label><input type="radio" name="gender" value="Male">
Male</label>
</div>
<label class="tos"><input type="checkbox" id="agree-TOS">
I have read and agree to the Terms of Service.</label>
</fieldset>
<button type="submit">Create account</button>
</form>
CSS
.cleanForm {
width: 550px;
}
fieldset > label > input {
display: block;
}
input[type="checkbox"] {
display: inline;
}
label {
margin: 10px;
padding: 5px;
}
fieldset > label {
float: left;
width: 200px;
}
label:nth-child(2n+1) {
clear: both;
}
#gender, .tos, button {
clear: both;
}
.tos {
width: 400px;
}
input[type="text"], input[type="email"], input[type="password"] {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: inset 2px 2px 3px rgba(0, 0, 0, 0.2);
-moz-box-shadow: inset 2px 2px 3px rgba(0, 0, 0, 0.2);
box-shadow: inset 2px 2px 3px rgba(0, 0, 0, 0.2);
padding: 5px;
}

Answer 3

You may try this:
HTML
<form action="#" class="cleanForm" method="POST">
<fieldset>
<div class="column">
<input type="text" name="firstname" placeholder="first name" required />
<em>Please enter your first name</em>
</div>
<div class="column last">
<input type="text" name="lastname" placeholder="last name" required />
<em>Enter your last name</em>
</div>
<div class="column">
<input type="email" name="email" placeholder="e-mail" required />
<em>Enter your e-mail address</em>
</div>
<div class="column last">
<input type="email" name="email2" placeholder="re-enter e-mail" required />
<em>Re-enter your e-mail address</em>
</div>
<div class="column">
<input type="password" name="password" placeholder="password" required />
<em>Enter a password between 8 and 20 digits</em>
</div>
<div class="column last">
<input type="password" name="password2" placeholder="re-enter password" required /><br />
<em>Re-enter the password</em>
</div>
<p style="clear:both;">
<input type="radio" name="gender" value="Female" checked />
<label for="female">Female</label>
<input type="radio" name="gender" value="Male" />
<label for="male">Male</label>
</p>
<p>
<input type="checkbox" id="agree-TOS" />
<label for="agree-TOS">I have read and agree to the Terms of Service.</label>
</p>
<input type="submit" value="Create account" />
</fieldset>
</form>
CSS
form.cleanForm {
width:700px;
margin:0 auto;
}
form.cleanForm p {
margin-bottom:15px;
}
input[type="email"], input[type="password"], input[type="text"] {
font-family: Arial, Sans-Serif;
font-size: 18px;
color: #adadad;
padding: 10px;
outline:none;
float:left;
border: solid 1px #adadad;
width: 230px;
transition: all 2s ease-in-out;
-webkit-transition: all 2s ease-in-out;
-moz-transition: all 2s ease-in-out;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
-moz-box-shadow:inset 0 0 5px 5px #E6E6E6;
-webkit-box-shadow:inset 0 0 5px 5px #E6E6E6;
box-shadow:inset 0 0 5px 5px #E6E6E6;
clear: right;
}
input[type="email"]:focus, input[type="email"]:hover, input[type="password"]:focus, input[type="password"]:hover, input[type="text"]:focus, input[type="text"]:hover {
border:1px solid #FF003F;
}
form.cleanForm em {
font-size:12px;
}
.column{
width:250px;
float:left;
margin-right:20px;
padding: 10px;
}
.last{
margin:0;
padding: 10px;
}
Output

Answer 4

#PPvG's answer is very close, but not perfect:
In almost all cases, every <input> tag should have a matching <label> tag, and where you have used <em> is a perfect place for a label.
In this case, inline-block is more appropriate than float
Here's how I would do it:
HTML:
<div class="field">
<input type="text" name="firstname" id="firstname_field" placeholder="first name" required />
<label for="firstname_field">Please enter your first name</label>
</div>
CSS:
div.field {
display: inline-block;
width: 200px;
}
div.field label
{
display: block;
}