title: CSS floating input and submit button in chrome
body: <p>So I am obviously not super advanced in CSS but usually I can figure these out on my own, not this time though.</p>
  
  <p>I am trying to have my search button float:left of my input field, all this is happening in an absolute position in my header.</p>
  
  <p>Although I'm sure I may use some improper shortcuts to align my stuff the way I want, I did manage to have it display on explorer but it doesn't work on chrome (and apparently firefox too)</p>
  
  <p>The html relevant to my problem:</p>
  
  <pre><code>    &lt;div id="search-bar"&gt;
                      &lt;div id="search-input"&gt;
                          &lt;form action="#" method="get"&gt;
                              &lt;p class="search"&gt; 
                                  &lt;input type="text" name="search" id="search" /&gt;
                              &lt;/p&gt;
                              &lt;p class="submit"&gt; 
                                  &lt;input type="submit" value="Search" /&gt;
                              &lt;/p&gt;
                              &lt;div class="clear"&gt;&lt;/div&gt;
                          &lt;/form&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  </code></pre>
  
  <p>and the css:</p>
  
  <pre><code>#search-input p{
  margin:0;
  padding:0;
  border:0;
  outline:0;
  }
  
  #search-bar{
  position:absolute;
  bottom: -10px;
  right:0;
  height: 55px;
  width: 500px;
  background: #e6e5e5;
  border-radius: 10px;
  }
  #search-input{
  position:absolute;
  bottom: 10px;
  right: 20px;
  }
  
  #search-input #search{
  float:left
  }
  
  #search-input .submit input{
  float:left
  }
  
  input{     
      border: solid 1px #E5E5E5;  
      outline: 0;  
      font: normal 13px/100% Verdana, Tahoma, sans-serif; 
      width: 370px;
      padding: 8px;
      background: #FFFFFF;  
  }  
  
  input:hover, input:focus {   
      border-color: #C9C9C9;   
  } 
  
  .submit input {  
      width: auto;  
  border: solid 1px #617798;
      background: #617798;  
  
  font-size: 14px;  
      color: #FFFFFF;  
  }
  
  .submit input:hover {  
      background: #7187a8
  }
  </code></pre>
  
  <p>Or if the problem is deeper down, here is the link to my practice folder: <a href="http://www.gfortin.com/css_practice/page.html" rel="nofollow">http://www.gfortin.com/css_practice/page.html</a></p>
  
  <p>I would love to know how to fix it and to have any of my bad practices hinted out to me.</p>
  
  <p>Thanks.</p>