I have given my header section in the below fiddle...I'm not able to give the whole code as its too huge...

But the problem is only with the header...

As I resize the browser window, the input type box stays the same size; I want the width of the input box to change as the width of the viewport changes.

<http://jsfiddle.net/7hJ4t/>

html

```
<div id="header">
    <div class="col-md-3 col-xs-5 logo"><img src="theme/img/pp_logo_beta_lg.png" width="312" height="36" align="left"></div>
    <!-- move these links to the right-->
    <div class="newmenu">
      <ul>
            <li id="datalink"><a href="#">LIB</a></li>
            <li id="helplink"><a href="./SearchHelp">HELP</a></li>
            <li id="FeedbackLink"><a href="#">FEEDBACK</a></li>
            <li id="logoutLink"><a href="#">LOGOUT</a></li>
          </ul>
    </div>

    <div id="mainsearch"><div id="mainsearchbutton" class="searchtitle"> SEARCH:</div><div id="searchbox">
      <input id="small_search_string" name="search_string" type="text" class="newsearch rounded" placeholder="Search..." maxlength="500" ><input type="button" id="searchButton1" class="searchButton" title="Click here to search the database" onclick="performSearch();" >

    </div>
    </div>
</div>

```

css

```
.rounded {
    background-color: #fff;
    border-radius: 7px 0px 0px 7px;
    -moz-border-radius: 7px 0px 0px 7px;
    -webkit-border-radius: 7px 0px 0px 7px;
    -moz-box-shadow: 3px 3px 6px #51575e;
    -webkit-box-shadow: 3px 3px 6px #51575e;
    box-shadow: 3px 3px 6px #51575e;
}

.newmenu {
    float: right;
    z-index: 3000;
    min-height: 40px;
    margin-top: 20px;
    font-family: 'Helvetica Neue', Helvetica, arial, sans-serif;
    font-weight: bold;
    font-size: 14px;
    text-align: right;
    margin-right: 5px;
}

.newmenu ul {
    list-style: none;
}

.newmenu li {
    display: inline;
    text-decoration: none;
    margin-left: 12px;
}

```