Aligning inputs ontop & next to eachover - html

Question

I am trying to align 2 inputs on top of eachover next to another 2 inputs on top of each other. Here is what it keeps giving me:
http://prntscr.com/33k6bq
It seems to have no problems with 2 of them, but with another 2 next to them it just doesn't want to work.
Here is the style for them:
CSS:
.loginbutton {
font-family: 'Nunito';
color: #fff;
font-size: 16px;
background-image: url(../images/gradient.png);
background-position: 0, center;
display: inline-block;
background-color: #81bb0f;
height: 71px;
width: 100px;
margin-left: 10px;
box-shadow:0 0 0 1px rgba(0,0,0,.25) inset,0 0 0 2px rgba(255,255,255,.25) inset;
border: 1px solid #919191;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 2px;
padding: 10px
}
HTML:
<form method="post" id="phase-0-form">
<input type="text" id="habbo-name" placeHolder="Username" size="35" value="<?php echo $template->form->reg_username; ?>" name="reg_username" class="logintext" maxlength="32">
<input type="text" id="email" size="35" placeHolder="Email" name="reg_email" value="<?php echo $template->form->reg_email; ?>" class="logintext" maxlength="48"><br>
<input type="password" id="password" placeHolder="Password" size="35" name="reg_password" value="" class="logintext" maxlength="32" style="float: left;">
<input type="password" id="password2" placeHolder="Confirm Password" size="35" name="reg_rep_password" value="" class="logintext" maxlength="32">
<input type="password" id="seckey" size="35" placeHolder="Security Key" name="reg_seckey" value="1111" hidden="yes" class="text-field" maxlength="4" >
<button type="submit" name="register" class="loginbutton" style="float: right">Register NOW</button>
</form>

Answer 1

There are many ways to fix this. With the lack of information you provided, I can suggest you two things:
simply add a line break (<br>) after the second input
put the inputs inside a container and make sure the container's width allow two input fields to fit in, but not three

Answer 2

Updated JSFiddle here
You had a float: right in your CSS (in input.logintext) - this is what was messing it up.
I also removed style="float: left;" from the password input as this is not required
Update: I've re-ordered the fields and added buttons to the divs
HTML:
<div id="logincontainer">
<form method="post" id="phase-0-form">
<div style="float:left;">
<div class="regbutton">Go back to Index</div>
</div>
<div style="float:left;">
<input type="text" id="habbo-name" placeHolder="Username" size="35" value="<?php echo $template->form->reg_username; ?>" name="reg_username" class="logintext" maxlength="32" /><br />
<input type="password" id="password" placeHolder="Password" size="35" name="reg_password" value="" class="logintext" maxlength="32" />
</div>
<div style="float:left;">
<input type="text" id="email" size="35" placeHolder="Email" name="reg_email" value="<?php echo $template->form->reg_email; ?>" class="logintext" maxlength="48" /><br />
<input type="password" id="password2" placeHolder="Confirm Password" size="35" name="reg_rep_password" value="" class="logintext" maxlength="32" />
<input type="password" id="seckey" size="35" placeHolder="Security Key" name="reg_seckey" value="1111" hidden="yes" class="text-field" maxlength="4" />
</div>
<div style="float:left;">
<button type="submit" name="register" class="loginbutton">Register NOW</button>
</div>
</form>
</div>
<div id="container">
<div class="image"></div>
</div>
CSS:
#import url(http://fonts.googleapis.com/css?family=Lato);
#import url(http://fonts.googleapis.com/css?family=Ubuntu);
#import url(http://fonts.googleapis.com/css?family=Nunito);
body {
background: url(../images/bg2.png) repeat-x bottom fixed;
background-color: #3aa4e2;
font-family:'Lato';
margin-top: 70px;
}
#container {
display: block;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
height: 371px;
width: 780px;
border: 1px solid #919191;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
background-color: #fff;
padding: 10px;
margin-top: 10px
}
input.logintext {
width: 180px;
height: 12px;
padding: 10px;
border: 1px solid #919191;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 2px;
}
.loginbutton {
font-family:'Nunito';
color: #fff;
font-size: 16px;
background-image: url(../images/gradient.png);
background-position: 0, center;
display: inline-block;
background-color: #81bb0f;
height: 71px;
width: 100px;
margin-left: 10px;
box-shadow:0 0 0 1px rgba(0, 0, 0, .25) inset, 0 0 0 2px rgba(255, 255, 255, .25) inset;
border: 1px solid #919191;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 2px;
padding: 10px
}
.regbutton {
text-align: center;
font-family:'Nunito';
color: #fff;
font-size: 16px;
background-image: url(../images/gradient.png);
background-position: 0, center;
float: left;
display: inline-block;
background-color: #e70505;
height: 37px;
margin-right: 21px;
width: 100px;
box-shadow:0 0 0 1px rgba(0, 0, 0, .25) inset, 0 0 0 2px rgba(255, 255, 255, .25) inset;
border: 1px solid #919191;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 2px;
padding: 16px
}
.fbbutton {
text-align: center;
font-family:'Nunito';
color: #fff;
font-size: 16px;
background-image: url(../images/gradient.png);
background-position: 0, center;
float: left;
display: inline-block;
background-color: #3b5998;
height: 37px;
width: 100px;
box-shadow:0 0 0 1px rgba(0, 0, 0, .25) inset, 0 0 0 2px rgba(255, 255, 255, .25) inset;
border: 1px solid #919191;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 2px;
padding: 16px;
margin-right: 10px
}
.usersonline {
text-align: center;
font-family:'Nunito';
color: #919191;
font-size: 16px;
background-image: url(../images/gradient.png);
background-position: 0, center;
float: left;
display: inline-block;
background-color: #e6e6e6;
height: 37px;
margin-right: 21px;
width: 100px;
box-shadow:0 0 0 1px rgba(0, 0, 0, .25) inset, 0 0 0 2px rgba(255, 255, 255, .25) inset;
border: 1px solid #919191;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 2px;
padding: 16px
}
.loginbutton:hover, .regbutton:hover, .fbbutton:hover, .usersonline:hover {
opacity: 0.8;
}
#logincontainer {
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
border: 1px solid #919191;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
background-color: #fff;
padding: 10px;
height: 70px;
width: 780px;
}
.image {
background: url(../images/mainimg2.png);
height: 371px;
width: 780px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}

Answer 3

Its hard to tell from just css and screenshot, but my guess would be to warp them in div like this:
<div>
<input />
<input />
</div>
<div>
<input />
<input />
</div>
And arrange them later with css