html - Transfer Search Box From Old Website to New Website -

i working company has hired me turn new home page design of theirs html , css. in design gave me there search box in header same 1 on current webpage (http://shop.manorfinewares.com/intro.html). unsure how navigate current page's source code in order transfer search box new page designing them. here header code have far...

css:

    #header{         position:absolute;         width:100%;         top:0;         height:107px;         min-width:600px;         border-bottom: 1px dotted #86beca;   } #headercontainer{                  position:relative;                  width:100%;                  margin:0 auto;                  top:0;                  height:107px;                  max-width:1280px;                  min-width:600px;                  border-bottom: 1px dotted #86beca;  } .headerutilitycontainer{            float:left;            padding-top:4px;            margin-left:8%;            width:22%;            height:103px;                      } .headerutilitycontainer img{            float:left;            margin-top:2px;            width:40%;            height:9px;            }  .headerlogocontainer{            float:left;            margin:0px;            width:40%;            height:107px;             }  .headerlogocontainer img {                display:block;                margin-top:30px;                margin-left:auto;                margin-right:auto;                width: 55%;                max-width:250px;                height: 57%;                }          .searchcontainer{         float:left;         text-align:right;         font-size:70%;         padding-top:4px;         margin-right:8%;         width:22%;         height:103px;          }  .headerborderdiv{                  float:left;                  width:100%;                  margin:0 auto;                  padding:0px;                  height:2px;                  border-bottom: 1px dotted #86beca; 

html:

<div id="header">         <div id="headercontainer">          <div class="headerutilitycontainer">           <img src="images/manorsocialbuttons.png" />          </div>          <div class="headerlogocontainer">           <img src="images/homepagelogo.png"/>          </div>          <div class="searchcontainer">          login / register  cart (0)          </div>         </div>        </div> 

any advice helpful not sure start. have never worked xls search bars in past

it's still unclear want, right floated search bar clear icon on input? have created fiddle you, replicates behaviour of site mentioned.

http://jsfiddle.net/dp22y/ 

html

<div id="container">    <div id="utility">utility</div><!--  --><div id="logo">logo</div><!--  --><div id="search">login / register | cart (0)         <span class="clearable">             <input class="data_field" type="text" name="search" placeholder="search..."/>             <span class="icon_clear">x</span>         </span>     </div>     </div> 

css

#container{     margin:0 auto;      height:100px;     width:80%; }  #utility, #logo, #search{     box-sizing: border-box;     color:#000;     height:100%;     float:left; } #utility{     background:#f1f1f1;      width:33.3%;     padding:10px; }  #logo{     background:#e0e0e0;      width:33.3%;     padding:10px;  } #search{     background:#e9e9e9;      width:33.3%;     padding:10px;     text-align:right }  #search > #data_field{     margin:10px 0 10px;     padding:5px;     width:100px;     float:right; }  span.icon_clear{     position:absolute;     right:10px;     top:0px;         display:none;     cursor:pointer;     font: bold 1em sans-serif;     color:#38468f;   } span.icon_clear:hover{     color:#f52; } .clearable{     position:relative; } .data_field{     padding-right:17px; /* add space 'x' icon*/     width:100px; } 

jquery

$(document).on('propertychange keyup input paste', 'input.data_field', function(){     var io = $(this).val().length ? 1 : 0 ;     $(this).next('.icon_clear').stop().fadeto(300,io); }).on('click', '.icon_clear', function() {     $(this).delay(300).fadeto(300,0).prev('input').val(''); }); 

as far functionality concerned, different question altogether. depends on language using, want make results appear on page reload or without using ajax, whats db scheme etc. basic search this

1. wrap search field form
2. set action , method form
3. action page search results shown on