Align a logo and a Search Box using CSS - html

Question

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.
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;
}
<header>
<div class="wrap-header">
<div id="logo"><img src="./images/logo.png"/></div>
<form id="searchbox" action="search.php" method="post">
<input id="search" type="text" placeholder="Type here" name="search">
<input name="submit" type="submit" id="submit" formmethod="POST" value="Search">
</form>
</div>
</header>
What is happening is the logo is okay but the submit button for the search-box is inside the text-box for the search.

Answer 1

Just edit following css header #search class
header #search {
padding: 5px 9px;
height: 20px;
margin-right: 90px;
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);
}
It will do the job well.. Here is the preview
Edit

Answer 2

You need toadd min-width to your header element
Here's working jsfiddle http://jsfiddle.net/otbay822/

Answer 3

<header>
<div class="wrap-header">
<div id="logo" class="inline-div">
<img src="./images/logo.png"/>
</div>
<div class="inline-div">
<form id="searchbox" action="search.php" method="post">
<input id="search" type="text" placeholder="Type here" name="search">
<input name="submit" type="submit" id="submit" formmethod="POST" value="Search">
</form>
</div>
</div>
</header>
CSS:
.inline-div{
display:inline-block;
}
I Wrapped the Form in a div and applied a class too both the form and the logo div. And then simply applied display:inline-block;
Hope it Helps.