title: Align a logo and a Search Box using CSS
body: <p>I having problems trying to get a log and a search box to go side by side. The logo on the left and the search box on the right.        </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>header {
                  background:#383838;
                  height: 130px;
                  border-top:10px solid #2C2C2C; border-bottom:1px solid #2C2C2C;
                  }
      
          .wrap-header {
                 width:960px;
                 position:relative;
                 margin: 0px auto;
                  }
      
          header #logo {
                 position:absolute;
                 top:40px;
                 left: 30px;
                 width: 100%;
                 }
      
          header #search,
       
          header #submit {
      
          position: absolute;
                   top: 60px;
                   right: 20px;
                   width: 258px;
                   z-index: 15;
                   }
      
          header #search {
          padding: 5px 9px;
          height: 20px;
          width: 300px;
          border: 1px solid #a4c3ca;
          background: #f1f1f1;
          border-radius: 50px 3px 3px 50px;
          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);            
          }
      
          header #submit
          {       
          background-color: #6cbb6b;
          background-image: linear-gradient(#95d788, #6cbb6b);
          border-radius: 3px 50px 50px 3px;    
          border-width: 1px;
          border-style: solid;
          border-color: #7eba7c #578e57 #447d43;
          box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 
                      0 1px 0 rgba(255, 255, 255, 0.3) inset;
          height: 35px;
          margin: 0 0 0 10px;
          padding: 0;
          width: 90px;
          cursor: pointer;
          font: bold 14px Arial, Helvetica;
          color: #23441e;    
          text-shadow: 0 1px 0 rgba(255,255,255,0.5);
          }
      
          header #submit:hover {       
          background-color: #95d788;
          background-image: linear-gradient(#6cbb6b, #95d788);
          }   
      
          header #submit:active {       
          background: #95d788;
          outline: none;
          box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;        
          }
      
         header #submit::-moz-focus-inner {
         border: 0;  /* Small centering fix for Firefox */
         }
      
         header #search::-webkit-input-placeholder {
         color: #9c9c9c;
         font-style: italic;
         }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;header&gt; 
        
       &lt;div class="wrap-header"&gt;
         &lt;div id="logo"&gt;&lt;a href="index.php"&gt;&lt;img src="./images/logo.png"/&gt;&lt;/a&gt;&lt;/div&gt;
        &lt;form id="searchbox" action="search.php" method="post"&gt;
              &lt;input id="search" type="text" placeholder="Type here" name="search"&gt;
              &lt;input name="submit" type="submit" id="submit" formmethod="POST" value="Search"&gt;
              &lt;/form&gt;
       &lt;/div&gt;
      &lt;/header&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>What is happening is the logo is okay but the submit button for the search-box is inside the text-box for the search. </p>