kodowanie paska wyszukiwania z ikoną wewnątrz niego

Question

Próbuję kodować następujący układ. Popsułem kod i nie jestem pewien, jaki jest najlepszy sposób na zrobienie tego.

<div class="search-wrapper"> 
     <form action="search.php" method="get" name="search"> 
      <div class="search-box"><img class="search-icon" src="images/search-icon.png" width="21" height="18" alt="search icon" /> 
      <input name="seach" type="text" value="Search for dishes or restaurants" /> 
      </div> 
      <input class="submit-button" name="Go" type="submit" /> 
     </form> 
     </div> 



#search { 
    height:125px; 
    overflow:hidden; 
} 
.search-wrapper { 
    width:465px; 
    height:45px; 
    background-color:#f0f0f0; 
    margin:43px auto 0; 
    border:1px solid #e9e9e9; 
    -moz-border-radius: 5px; /* FF1+ */ 
    -webkit-border-radius: 5px; /* Saf3-4 */ 
    border-radius: 5px; /* Opera 10.5, IE 9, Saf5, Chrome */ 
    position:relative; 
} 
.search-box { 
    width:375px; 
    height:32px; 
    background-color:#fff; 
    margin:5px 7px; 
    border:1px solid #cfcfcf; 
    -moz-border-radius: 5px; /* FF1+ */ 
    -webkit-border-radius: 5px; /* Saf3-4 */ 
    border-radius: 5px; /* Opera 10.5, IE 9, Saf5, Chrome */ 
    position:relative; 
} 
.search-box img.search-icon { 
    margin:8px 0 0 5px; 
} 
.search-box input { 
    border:none; 
    height:30px; 
    width:332px; 
    margin:0; 
    position:absolute; 
    font-size:16px; 
    padding-left:5px; 
    padding-right:5px; 
} 
input.submit-button { 
    background:url(../images/go-button.png) no-repeat; 
    text-indent:-9999px; 
    border:none; 
    height:32px; 
    width:68px; 
    position:absolute; 
    top:6px; 
    left:390px; 
    cursor:pointer; 
//right:15px; 
} 

Oto kod bin @ pasta:

http://pastebin.com/KQR3mPiW

Obrazy:

http://bayimg.com/IAPcpAACi

http://bayimg.com/JapcBaAci

Answer 1

Tu yo przejść: http://jsfiddle.net/SjafT/

Preview:

Można zmienić wartość 'przestawić w jsfiddle' części.

Answer 2

Dlaczego używacie

position: absolute; 

? Zastosowanie

position: relative; float: left; 

z pola wyszukiwania i tym samym przyciskiem. Nie będzie również wymagana specyfikacja marginesu.