Getting my form input fields beneath each other

Vote count:

0

In my code i have created a form with, up to now, 2 input fields. These fields however align next to each other while i want them to go beneath each other, tough i cant get this to work.

This is the code of my form:

<div id="wrapper">

<div id="register_wrapper">
   <h1>Registreren</h1>
   <form class="registratie_form" id ="register-form" action="register.php" method="post" novalidate="novalidate" >


             <input type="text" id="voornaam" name="voornaam" required placeholder="Jouw voornaam" maxlenght='50' pattern="[A-Za-z]{2,}">
                   
              <input type="text" id="achternaam" name="achternaam" required placeholder="Jouw achternaam" maxlenght='50' pattern="[A-Za-z]{4,}">                              
       </form>      
</div>

The CSS code:

    #wrapper {
      margin-right: auto;
      margin-left: auto;
      width: 1600px;
      height: 799px;  
    }

#register_wrapper {
      margin-right: 0;
      margin-left: 0;
      width: 700px;
      height: 600px;

      clear: both;
      position: relative;
      float: right;
    }

.registratie_form input:focus:invalid, .registratie_form textarea:focus:invalid {
    background: #fff no-repeat 98% center;
    box-shadow: 0 0 5px #d45252;
    border-color: #b03535
 }

 .registratie_form input:required:valid, .registratie_form textarea:required:valid {
    background: #fff no-repeat 98% center;
    box-shadow: 0 0 5px #5cd053;
    border-color: #28921f;
}   

#voornaam{
        font-size: 1em;
        outline: none;
        padding: 0.5em;
        border-radius:10px;

        width: 280px;
        position: relative;
    }


    #voornaam::-webkit-input-placeholder { font-style: italic; }
    #voornaam::-moz-placeholder { font-style: italic; }
    #voornaam::-ms-input-placeholder { font-style: italic; }

#achternaam{
        font-size: 1em;
        outline: none;
        padding: 0.5em;
        border-radius:10px;

        width: 280px;
        position: relative;
    }


    #achternaam::-webkit-input-placeholder { font-style: italic; }
    #achternaam::-moz-placeholder { font-style: italic; }
    #achternaam::-ms-input-placeholder { font-style: italic; }  

http://ift.tt/1kESQgc

I tought quite long about how i could ask it or explain it i also added a fiddle with all of the code, just in case the non-register code is related to the problem:

As you can see in the fiddle, the register form with the input fields voornaam and achternaam (sorry for the dutch langquage btw) are besides each other, what i want though is to have them beneath each other.. the register form is wrapped in the register_wrapper. I want both input fields to align to the left of this wrapper so i used float to do this. Though float perhaps also causes the fields to NOT align beneath each other? Thats the reason i removed the float, but they still are aligning besides each other.

I try'd to remove all the non-register related code in my fiddle but for some reason when i did this the fields will align beneath each other (1 completely to the left and 1 field some px to the right - which is also cinda strange?). Though when i try'd to remove the css of all the other stuff in my working docuement and testing it on the web they are still aligned besides each other while in the fiddle they arent..

Anyway, loads of strange stuff happening while i dont know what is causing the problem. So to keep you guys on the main question: how do i get my 2 register input fields align beneath each other instead of besides each other like in the posted fiddle..

Thank you all in advance and sorry for my bad English, it isnt my native langquage as you might noticed:)

asked 36 secs ago

user3242154

1