CODEWITHSUNDEEP
htmlcss
user3399851
user3399851

Reputation: 105

Aligning inputs ontop & next to eachover

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>

Upvotes: 0

Views: 48

Answers (3)

Gary Harrower
Gary Harrower

Reputation: 176

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;">
            <a href="index"><div class="regbutton">Go back to Index</div></a>
        </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;
}

Upvotes: 0

Ripaz
Ripaz

Reputation: 100

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

Upvotes: 0

Shomz
Shomz

Reputation: 37701

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

Upvotes: 1

Related Questions