title: Position a submit button inside div
body: <p>Hi I am having some problems with the positioning of a submit button. I have posted the code below.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="search"&gt;
    &lt;form action="post"&gt;
      &lt;input type="text" name="fname" placeholder="First name"&gt;
      &lt;input type="text" name="lname" placeholder="Last name"&gt;
      &lt;input type="submit" name="submit" value="Search"&gt;
    &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.search {
    position: absolute;
    background-color: red;
    width: 100%;
    height: 30px;
  }
  input[type="text"] {
    background-color: #f7f7f7;
    height: 30px;
    width: 280px;
    color: #4D4C4C;
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    padding: 0px 5px 0px 5px;
    -webkit-box-sizing: border-box;
    moz-box-sizing: border-box;
    box-sizing: border-box;
    border: 1px solid rgba(147, 184, 189,0.8);
  }
  input[type="submit"] {
    font-family: 'Open Sans', sans-serif;
    font-size: 13px;
    height: 30px;
    width: 100px;
  }
  </code></pre>
  
  <p>Here is an image showing the output. My problem is that there is a small space above the submit button and I cant find out why since they both have height set to 30px . I want the button to have the same height as the .search div. Height: 100% does not seem to work.</p>
  
  <p><a href="http://i57.tinypic.com/atswm0.png" rel="nofollow">http://i57.tinypic.com/atswm0.png</a></p>