I have a logo positioned at the top left of my header that needs to stay fixed in place. Additionally, I want to center a search input form horizontally within the header, even when the browser window is resized. The challenge arises when trying to align the "Go" button next to the input field.
I've attempted using auto margins and other techniques without success. Below is the code snippet along with a link to a jsfiddle example.
Thank you for any assistance!
html:
<header>
<h1 id="logo">Test Logo</h1>
<form method="get" id="search-form">
<input type="text" id="search" placeholder="Search Here" autocomplete="off" />
<ul id="suggestions"></ul>
<input type="submit" value="Go" />
</form>
</header>
css:
body {
font: 14px/1.5 "Open Sans", "PT Sans", "Source Sans Pro",
"Helvetica Neue", Helvetica, Arial, Sans-Serif;
color: #333;
height: 100%;
}
h1, h2, h3, h4, h5, h6 {
margin-bottom: 10px;
font-weight: bold;
margin-top: 0px;
}
header {
position: relative;
height: 50px;
background-color: black;
padding-top: 10px;
}
#logo {
margin-bottom: 10px;
font-weight: bold;
margin-top: 0px;
margin-left:20px;
text-align:left;
color:#ECF0F1;
display:inline
}
#search {
width: 350px;
padding: 4px 8px;
outline: none;
display:inline;
}
#search-form input[type='submit'] {
display:inline;
padding: 5px 8px;
border: 1px solid #aaa;
background-color: #eee;
background-image: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#ddd));
background-image: -webkit-linear-gradient(top, #eee, #ddd);
background-image: -moz-linear-gradient(top, #eee, #ddd);
background-image: -o-linear-gradient(top, #eee, #ddd);
background-image: linear-gradient(to bottom, #eee, #ddd);
}
#search-form {
position: relative;
margin-bottom: 20px;
display:inline;
}