Positioning search bar on header - css

Question

I am having a logo and search bar on header. Logo is on the left corner. I want the search bar at the center of the header. What ever i try its half hidden in the navigation menu. Here is a rough jsfiddle
#header {
position:relative;
float:left;
clear:both;
width:100%;
height:110px;
background:url("resources/images/logo.jpg") repeat-y;
font-size:30px;
background:#ccc;
}
#header img {
position:relative;
left:20px;
top:13px;
border:0;
}
#header-search {
position:relative;
left:220px;
}

Answer 1

Try this
Using float to both #header img & #header-search with additional margin to customise the spacings.
#header {
position:relative;
float:left;
clear:both;
width:100%;
height:110px;
background:url("resources/images/logo.jpg") repeat-y;
font-size:30px;
background:#ccc;
}
#header img {
position:relative;
left:20px;
top:13px;
border:0;
float: left;
}
#header-search {
position:relative;
float: left;
margin-left: 40px;
margin-top: 30px;
}
JSFiddle

Answer 2

I recommend you to follow the css float concept for this. I have updated your fiddle based on my understanding. Have a look at it.
FIDDLE: http://jsfiddle.net/kiranvarthi/yaqxpm8e/4/
#header .logo {
float: left;
}
#header-search {
float: left;
margin: 30px;
}

Answer 3

Managing this without magic numbers can be achieved using a combination of floats and inline block
#header {
position:relative;
float:left;
width: 100%;
height:110px;
background:url("resources/images/logo.jpg") repeat-y;
font-size:30px;
background:#ccc;
text-align: center;
}
#header a {
float: left;
margin: 13px;
/* doesn't quite calculate (110-85)/2 = 12.5 */
}
#header-search {
display: inline-block;
margin-top: 35px; /* (110-40)/2 = 35px */
height: 30px;
}
<div id="header"> <a href="login.html"><img src="http://lorempixel.com/output/abstract-q-c-200-85-4.jpg"
width="200" height="85" /></a>
<div id="header-search">
<form id="searchForm" action="searchproduct.json">Product Name:
<input type="text" name="productName" value="${product.productName}" id="productName" />
<input type="submit" value="Search" />
</form>
</div>
</div>
Note - this method maintains the centered div responsively until the header is too narrow to support it. then you would need media queries.
JSFiddle Demo