While many may find this simple, my CSS skills are a bit rusty and I am seeking the best solution for this issue.
Below is my current HTML code:
<div class="head_wrap">
<div id="logo"></div>
<div id="search">
<form action="">
<input type="text" name="search" id="search" />
<button id="replacement-2"></button>
</form></div>
My goal is to have a centrally aligned DIV element on the page with the logo on the left margin and the search box on the right margin (text field and button elements aligned accordingly).
The methods I found online seem to be causing some issues for me.
Here is my current CSS:
.head_wrap {
width: 1024px;
margin: 0 auto;
position:relative;
}
#logo {
width:334px;
height: 100px;
position: absolute;
top:0;
left:0;
background-image: url('../images/logo.png');
background-repeat: no-repeat;
}
#search {
width: 241px;
height: 30px;
float: left;
padding-top:30px;
position: absolute;
top:15px;
right:40px;
}
#search input {
border: 0;
background: url('../images/search_bg.png') top left no-repeat;
width: 211px;
height: 25px;
padding-bottom: 3px;
padding-top: 3px;
padding-left: 5px;
padding-right:5px;
font-size: 75%;
color: #FFF;
float:left;
}
#replacement-2 {
width: 30px;
height: 30px;
padding: 50px 0 0;
margin: 0;
border: 0;
right:0px;
top:0;
background: transparent url('../images/search_button.png') no-repeat center top;
overflow: hidden;
cursor: pointer; /* hand-shaped cursor */
cursor: hand; /* for IE 5.x */
float:right;
}
form>#replacement-2 { /* For non-IE browsers*/
height: 0px;
}
This setup aligns the logo and the text field to the margins, but I'm struggling to get the button element to line up correctly with the text field.
If there's a simpler way to achieve this, I would appreciate any guidance in the right direction.
EDIT: Check out my answer below, which resolves the alignment issue. However, any suggestions for improving and tidying up my code would be greatly welcomed.