Getting my form input fields beneath each other

Question

@gnagy @Satwik Nadkarny Both your answers helped me, and if i could i would + them (requeres 15 rep sadly) but this has led me to another problem.

After the first 2 text input fields, i have added another input field of the type email and password. They use exactly the same css as the text input fields but for some reason they are overwrited with a css layout since the margin effect wont work (the email and password forms are really close to each other).

Do you guys perhaps know what is causing this?

See the picture for a better understanding;

http://s27.postimg.org/qevbboa6r/voorbeeld.png

Thanks in advance!

--original post-- 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://jsfiddle.net/LZ2xt/

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:)

Answer 1

You have a id Selector named voornaam.

#voornaam {
   font-size: 1em;
   outline: none;
   padding: 0.5em;
   border-radius:10px;
   width: 280px;
   position: relative;
}

You need to add this:

display:block;

to this.

So your id Selector looks like this:

#voornaam {
   font-size: 1em;
   outline: none;
   padding: 0.5em;
   border-radius:10px;
   display:block;    /* Add this property*/
   width: 280px;
   position: relative;
   margin:10px 0;    /* This makes it look better though not needed as per your question*/
}

See this here : http://jsfiddle.net/MxHHn/

Hope this helps!!!

UPDATE: Updated answer for the updated question

You can do away with id Selectors in this case. Instead, you can use class Selectors. That will save you tons of code. Just see the amount of code you can save:

#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; }  

input[type="text"]:hover {
     border: 1px solid #006FC4;
}

input[type="email"]:hover {
     border: 1px solid #006FC4;
}

input[type="password"]:hover {
     border: 1px solid #006FC4;
}       

input[type="text"] {
      background-color: #FFFFFF;
      border: 1px solid #E2E2E2;
      font-size: 12px;
      padding: 5px;
      outline: none;
}

All this code can be replace by just:

.allInputs {
    font-size: 1em;
    outline: none;
    padding: 5px;
    border-radius:10px;
    display:block;
    width: 280px;
    position: relative;
    margin:10px 0;
    border: 1px solid #E2E2E2;
    outline: medium none;
}

.allInputs::-webkit-input-placeholder {
    font-style: italic;
}

.allInputs::-moz-placeholder {
    font-style: italic;
}

.allInputs::-ms-input-placeholder {
    font-style: italic;
}

And you can have all text, password and email inputs working correctly by just adding the following class attribute:

class="allInputs"

So your html will be:

<input type="text" id="voornaam" class="allInputs"  placeholder="Jouw voornaam" maxlenght='50' pattern="[A-Za-z]{2,}" />

<input type="text" id="achternaam" class="allInputs" placeholder="Jouw achternaam" maxlenght='50' pattern="[A-Za-z]{4,}" />

<input type="password" id="password"  class="allInputs" placeholder="Password"/>

<input type="email" id="email"  class="allInputs" placeholder="Email"/>

See this here:http://jsfiddle.net/MxHHn/2/

Hope this helps!!!

Answer 2

input {
    display: block;
}

should do the trick for you :)

tested on your fiddle, works fine there