remplacement des balises de bouton avec des images et alignement avec un champ de texte

Question

Ceci est chose simple pour beaucoup, mes compétences CSS sont un peu rouillées et espérait trouver la meilleure solution à ce problème.

Voici mon code html actuel.

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

Ce que je suis en train de réaliser ici, est d'avoir un élément DIV qui est centralisée dans la page, le logo aligné sur la marge de gauche, et la zone de recherche aligné sur la marge de droite (zone de texte et le bouton éléments alignés en conséquence)

Les méthodes que j'ai étudiées moi-même sur Internet semblent poser quelques problèmes.

Voici mon CSS actuel.

.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; 

} 

Ceci est très bien pour obtenir le logo et le champ de texte pour aligner sur les marges, mais je vais avoir un problème constant à obtenir l'élément de bouton pour aligner correctement avec le champ texte.

Il ya probablement une façon plus simple de faire cela, j'espérais que quelqu'un pourrait me diriger dans la bonne direction.

EDIT: Voir ma réponse ci-dessous, cela résout le problème dans l'alignement. Cependant, si quelqu'un a une meilleure façon de faire cela pour ranger mon code, les contributions seraient grandement appréciées.

Answer 1

On dirait que le coupable pour le mauvais alignement a été une chose simple,

#search { 

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


} 

Où changé: padding-top: 30px;

Erreur idiote Je pense.

Answer 2

Si je comprends bien, je ferais cela (simplifié):

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

Donc, fondamentalement, par rapport au lieu de positionnement positionnement absolu, et enfin le bouton droit flottaient dans le formulaire.

Et il y a beaucoup d'autres choses que vous pouvez faire pour ce CSS pour simplifier et réduire le code.