Move two input boxes side by side

Question

I'm trying to re-arrange my input boxes to look something like this:

currently, they just go down one under each other

I tried using this code but all it did was make the boxes shorter http://jsfiddle.net/aY9HC/

Here is my code

   <style>
.fieldBlock
    {
    display: block;
    width: 200px;
    float: left;
    }

    </style>

here is the text box code

    <div id="main-wrapper">

        <div class="unix-login">

            <div class="container-fluid">

                <div class="row justify-content-center">

                    <div class="col-lg-4">

                        <div class="login-content card">

                             <center><h3>Register Account</h3>

                            <p><strong>Create Account</strong> » Purchase » Begin</p></center>

                            <div class="login-form">

                                <form data-toggle="validator" method="post" id="register_form">

                                    <div class="form-group">
<div class="fieldBlock">

                                        <label>Name</label>

                                        <input id="username" type="name" name="name" class="form-control" placeholder="First & Last Name" required>
</div>
                                    </div>

                                    <div class="form-group">
<div class="fieldBlock">
                                        <label>Age</label>

                                        <input type="dob" id="age" name="age"class="form-control" placeholder="03/26/2001" required></div>
</div>
                                    <div class="form-group">

                                        <label>Email address</label>

                                        <input id="email" type="email" name="email" class="form-control" placeholder="Email" data-error="This email is invalid" required>

                                        <div class="help-block with-errors"></div>

                                    </div>

                                    <div class="form-group">

                                        <label>Password</label>

                                        <input id="password" type="password" name="password" class="form-control" placeholder="Password" data-minlength="8" data-error="Minimum of 8 characters" required>

                                        <div class="help-block"></div>

                                    </div>

                                    <div class="form-group">

                                        <label>Choose Your Course</label>

                                        <select name="course" class="form-control">

                                            <option value="0" selected>Texas Parent Taught Drivers Ed</option>

                                            <option value="1">Texas Instructor Taught Drivers Ed</option>

                                            <option value="2">Texas Adult Drivers Ed</option>

                                        </select>

                                    </div>

                                    <div class="form-group">

                                        <label>Referral</label>

                                        <input id="referral" type="text" name="referral" class="form-control" placeholder="Referral Code" value="<?php echo $refer?>">

                                    </div>

                                    <div class="form-group checkbox">

                                        <label>

                                        <input id="policy" type="checkbox" data-error="Don't you agree?" required> Agree the terms and Privacy Policy

                                        </label>

                                        <div class="help-block with-errors"></div>

                                    </div>

                                    <button name="register" type="submit" class="btn btn-primary btn-flat m-b-30 m-t-30" >Register</button>

                                    <div class="register-link m-t-15 text-center">

                                        <p>Already have account? <a href="page-login.php"> Sign in</a></p>

                                    </div>

                                </form>

                            </div>

                        </div>

                    </div>

                </div>

            </div>

        </div>



    </div>

All it did was keep the boxes under each other and make them a bit smaller. I'm a bit stuck right now. Help would be appericated. Thanks!

Answer 1

try adding

 display:inline-block 

on both text boxes.

Alternatively you can also try

display: flex;

Answer 2

Try to use bootstrap grid (rows and cols) to organize input fields. Example pattern:

 <form data-toggle="validator" method="post" id="register_form">
     <div class="row mx-0">
        <div class="form-group col-6">   
            <div class="fieldBlock">
               <label>Name</label>
               <input id="username" type="name" name="name"                 
               class="form-control"                                               
               placeholder="First & Last Name" required>
          </div>   
       </div>
       <div class="form-group col-6">
           <div class="fieldBlock6">
              <label>Age</label>
              <input type="dob" id="age" 
              name="age"class="form-control" 
              placeholder="03/26/2001" required>
           </div>
       </div>
    </div>
    <div class="row mx-0">
        <div class="form-group col-12">
              <label>Email address</label>
              <input id="email" type="email" name="email" 
               class="form-control" placeholder="Email" 
               data-error="This email is invalid" required>

               <div class="help-block with-errors"></div>
         </div>
    </div>
 </form

Answer 3

You were on the right track with using float to move the elements next to each other. However, when elements are floating next to each other in a cramped space they will stack up by default. By making the parent container larger or smaller you can see how this works.

Also, there were a couple of missing fieldBlocks so the styles stop being applied.

I didn't want to take too much time on it but thought it would be fun to throw together a working sample from the code you provided. There's probably much more that could be cleaned up but hopefully it provides some insight.

http://jsfiddle.net/aY9HC/1373/

CSS

/* make a nice form wrapper */
#main-wrapper{
      width:100%;
      padding:1em;
}
#main-wrapper h3, 
#main-wrapper p, 
#main-wrapper button{
  text-align:center;
  margin-bottom:10px;
  clear:left;
}
#main-wrapper button{
  display:block;
  position:relative;
  left:45%;
}

/* Define our basic fieldBlock style / stagger rows */
.fieldBlock
{
  width: 50%;
  float: left;
  margin-bottom:15px;
}
.fieldBlock input, 
.fieldBlock select{
  height:30px;
}
.fieldBlock input[type='checkbox']{
  height:10px;
}
.fieldBlock:nth-of-type(3n){
  width:100%;
}
.fieldBlock:nth-of-type(3n) input{
  width:40%;
}

/* Define look for our labels */
.fieldBlock label{
  font-weight:bold;
  display:block;
  margin-bottom:5px;
}
.fieldBlock .nonblock{
  display:inline-block;
}

HTML

    <div id="main-wrapper">

      <h3>Register Account</h3>

      <p><strong>Create Account</strong> » Purchase » Begin</p>

      <form data-toggle="validator" method="post" id="register_form">

        <div class="fieldBlock">
          <label>Name</label>
          <input id="username" type="name" name="name" class="form-control" placeholder="First & Last Name" required>
        </div>

        <div class="fieldBlock">
          <label>Age</label>

          <input type="dob" id="age" name="age"class="form-control" placeholder="03/26/2001" required>
        </div>

        <div class="fieldBlock">
          <label>Email address</label>

          <input id="email" type="email" name="email" class="form-control" placeholder="Email" data-error="This email is invalid" required>

          <div class="help-block with-errors"></div>
        </div>

        <div class="fieldBlock">
          <label>Password</label>

          <input id="password" type="password" name="password" class="form-control" placeholder="Password" data-minlength="8" data-error="Minimum of 8 characters" required>

          <div class="help-block"></div>
        </div>


        <div class="fieldBlock">
         <label>Choose Your Course</label>

          <select name="course" class="form-control">

            <option value="0" selected>Texas Parent Taught Drivers Ed</option>

            <option value="1">Texas Instructor Taught Drivers Ed</option>

            <option value="2">Texas Adult Drivers Ed</option>

          </select>
        </div>


          <div class="fieldBlock">

            <label>Referral</label>

            <input id="referral" type="text" name="referral" class="form-control" placeholder="Referral Code" value="<?php echo $refer?>">

          </div>

          <div class="fieldBlock checkbox">


              <input id="policy" type="checkbox" data-error="Don't you agree?" required /> 
              <label for="policy" class="nonblock">Agree the terms and Privacy Policy</label>

            <div class="help-block with-errors"></div>

          </div>

            <button name="register" type="submit" class="btn btn-primary btn-flat m-b-30 m-t-30" >Register</button>

          <p>Already have account? <a href="page-login.php"> Sign in</a></p>


        </form>

</div>

Answer 4

You can just use col classes

<div class='row'>
    <div class='col'>Your first text box</div>
    <div class='col'>Your second text box</div>
</div>