replacing button tags with images and aligning with a text field

Question

This is simple stuff to many, my CSS skills are somewhat rusty and was hoping to find the best solution to this problem.

Here 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>

</div>

What I am trying to achieve here, is to have a DIV element which is centralized in the page, the logo aligned to the left margin, and the search box aligned to the right margin (text field and button elements aligned accordingly)

The methods I myself have researched on the internet seem to be causing a few problems.

Here is my current CSS.

.head_wrap {

width: 1024px;
margin: 0px 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 is fine for getting the logo and the text field to align to the margins, however I'm having a constant issue in getting the button element to line up correctly with the text field.

There probably is a more simpler way to do this, I was hoping someone could point me in the right direction.

EDIT: See my answer below, this solves the problem in the alignment. However if anyone has a better way of doing this to tidy my code up, contributions would be greatly appreciated.

Answer 1

Seems like the culprit for the mis-alignment was a simple thing,

#search {

    width: 241px;
    height: 30px;
    float: left;
    padding-top:18px;
    position: absolute;
    top:15px;
    right:40px;


}

Where changed: padding-top:30px;

Silly mistake I think.

Answer 2

If I'm understanding correctly, I would do this (simplified):

#wrap {}
#logo {float: left; position: relative;}
#search {float: right; position: relative}
#search #button {float: right;}

So basically relative-positioning instead of absolute positioning, and finally the button floated right within the form.

And there's lots of other stuff you can do to that CSS to simplify and reduce code.