Hello people I have a quick question to ask, "How do you put a search bar in the header of your website". I made the header of my website in photoshop and the navigation bar in fireworks. I made the search engine bar in google custom search and now I have the code but I'm confused about how I can actually place it in the header. I've seen alot of sites with search engine bar in the headerbut I have no idea how to do it. Can someone please explain?

1. create a div for header
<div id="header"></div>

2. Put this code between your head tag and change the width n height to the width and height of your header image
<style>
#header{
width:468px;
height:60px;
background-image:url(468x60-banner.jpg);
}
</style>

3.Inside your header div create another div called search
<div id="header">
<div id="search">
</div>
</div>

4. Add the style for your search div

#search{
width:50%;
float:right;
}

5.Place the custom search code between search div
<div id="search">
<div id="cse" style="width: 100%;">Loading</div>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
google.load('search', '1', {language : 'en'});
google.setOnLoadCallback(function() {
var customSearchControl = new google.search.CustomSearchControl('012390070684348 743025:d6xlxc4xzrm');
customSearchControl.setResultSetSize(google.search .Search.FILTERED_CSE_RESULTSET);
customSearchControl.draw('cse');
}, true);
</script>
<link rel="stylesheet" href="http://www.google.com/cse/style/look/default.css" type="text/css" />

</div>

6.Result

Thank you