CSS Div Grösse Stimmt nicht überein....

Hallo zusammen.
Ich hab ein problem und ich kriegs einfach ned gebacken.
Es ist so ich habe ein kontakt formular:
HTML:
<div class="content">
     <form id="form" class="topBefore" action="php/contact.php" method="post">
          <input id="name" class="clearable" type="text" name="name" placeholder="NAME">
          <input id="email" class="clearable" type="text" name="email" placeholder="E-MAIL">
          <textarea id="message" class="clearable" type="text" name="text" placeholder="NACHRICHT"></textarea>
        <input id="submit" class="clearable" name="submit" type="submit" value="SENDEN">
    </form>
</div>
CSS:
@import url(http://fonts.googleapis.com/css?family=Lato:100,300,400);

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
  color: #aca49c;
  font-size: 0.875em;
}

body {
  background: #e2dedb;
}

input {
  font-family: 'Lato', sans-serif;
  font-size: 0.875em;
  width: 100%;
  height: 50px;
  padding: 0px 15px 0px 15px;
 
  background: transparent;
  color: #726659;
 
  border: solid 1px #e2dedb;
  border-bottom: none;
 
  transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
}

textarea {
  width: 100%;
  height: 110px;
  max-height: 110px;
  padding: 15px;
 
  background: transparent;
  outline: none;
 
  color: #726659;
  font-family: 'Lato', sans-serif;
  font-size: 0.875em;
 
  border: solid 1px #e2dedb;
 
  transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
}

#submit {
  padding: 15px;
  margin: -5px 0px 0px 0px;
  font-family: 'Lato', sans-serif;
  font-size: 0.875em;
  color: #b3aca7;
  outline:none;
  cursor: pointer;
  border: solid 1px #e2dedb;
  border-top: none;
}

#submit:hover {
    color: grey;
    background-color: whitesmoke;
}

Mein Problem ist das ich es nicht schaffe das die inputs buttons etc. immer schön untereinander sind ohne position:absolute vlt sieht jemand fon euch den fehler.

ich hoffe ihr versteht was ich meine und könnt mir helfen.
 
Mein Problem ist das ich es nicht schaffe das die inputs buttons etc. immer schön untereinander sind ohne position:absolute vlt sieht jemand fon euch den fehler.

ich hoffe ihr versteht was ich meine und könnt mir helfen.
Die beiden Formularelemente <textarea> und <input type=submit> interpretieren das Boxmodell unterschiedlich - deshalb als Ergänzung:
CSS:
textarea,input {box-sizing:border-box;}
https://jsfiddle.net/SpiceLab/6u6a4o88/ -wegen background: #e2dedb mit border-color:#000, damit man auch was sieht:D-
 
Zurück