title: Trouble aligning contact form
body: <p>I have been trying to edit this easy form to just look good for 3 hours now and Im still not quite there. I want the input fields to be on the same row as the labels naturally, but somehow the inputs are a bit lower than the labels and I cant seem to edit them with margins. What am I doing wrong?</p>
  
  <p>Heres a snaggy picture of what the form looks like:</p>
  
  <p><img src="https://i.stack.imgur.com/fkJda.jpg" alt="http://snag.gy/oPRNy.jpg"></p>
  
  <p>// CONTACT FORM
      
  <br/>
    </p>
  
  <pre><code>&lt;label for="name"&gt;&lt;p&gt;Name:&lt;/p&gt;&lt;/label&gt;
  &lt;input type="text" name="name" id="name" tabindex="1" /&gt;
  &lt;br/&gt;
  &lt;label for="email"&gt;&lt;p&gt;Email:&lt;/p&gt;&lt;/label&gt;
  &lt;input type="text" name="email" id="email" tabindex="2" /&gt;
  &lt;br/&gt;
  &lt;label for="subject"&gt;&lt;p&gt;Subject:&lt;/p&gt;&lt;/label&gt;
  &lt;input type="text" name="subject" id="subject" tabindex="3" /&gt;
  &lt;br/&gt;
  &lt;label for="comments"&gt;&lt;p&gt;Comments:&lt;/p&gt;&lt;/label&gt;
  &lt;textarea name="comments" id="comments" cols="45" rows="5" tabindex="4"&gt;&lt;/textarea&gt;
  &lt;br/&gt;
  &lt;label for="submit"&gt;&lt;/label&gt;
  &lt;input type="submit" name="submit" id="submit" value="Submit" tabindex="5" /&gt;
  &lt;label for="reset"&gt;&lt;/label&gt;
  &lt;input type="reset" name="reset" id="reset" value="Clear" tabindex="6" /&gt;
  </code></pre>
  
  <p>
  </p>
  
  <p>// CSS</p>
  
  <pre><code>    label {
      float: none;
      font-size: 100%;
      width: 250px; /* just this width evens out input box placement */
      font-weight: bold;
  }
  input { /*I think these just fall in because they are naturally following the labels!*/
      width: 250px;
      padding:5px;
      margin-top: -10px;
  }
  textarea {
      width: 250px;
      height: 150px;
      resize:none;
  }
  guestbook {
      margin-top:50px;
      text-align:center;
      font-size:26px;
      color:#05924b;
      font-family:Gisha;
  
  }
  gb p {
      color:#05924b;
      font-family:Gisha;
      text-align:left;
      margin-left:85px;
      margin-top:0px;
      margin-bottom:0px;
  }
  </code></pre>
  
  <p>// SOLUTION: Removed the "p" paragraph from within the form and adjusted the rest from CSS, added float:left to the different inputs fields and rows, lowered the label width so the input came closer, then calculated and put the correct margin-right to both input{} and textarea{} and last to #submit to get everything in nice order.
  Heres a screenshot from the new code: <a href="http://snag.gy/PwpbQ.jpg" rel="nofollow noreferrer">http://snag.gy/PwpbQ.jpg</a></p>
  
  <p>// CSS</p>
  
  <pre><code>    /* Input */
  label {
      float: left;
      font-size: 100%;
      width: 50px; /* just this width evens out input box placement */
      font-weight: bold;
      margin: 2px 0;
      padding:5px;
      font-family: Gisha;
      font-style: normal;
      font-variant: normal;
      text-decoration: none;
      text-align: left;
  }
  input { /*I think these just fall in because they are naturally following the labels!*/
      width: 300px;
      padding:5px;
      margin: 5px 0;
      font-size:24px;
      margin-right:192px;
  }
  textarea {
      width: 300px;
      height: 150px;
      resize:none;
      margin:5px 0;
      padding:5px;
      margin-right:192px;
  }
  #submit {
      margin-right:225px; 
  }
  /* End of input */
  </code></pre>