HTML - Need Header To Not Move On Scrolling

<font face="Arial" color="#000000" size="3"><IMG src="/images/hphone.gif"> <a href="?action=login">&nbsp;&nbsp;Home</a><br><br>

<IMG src="/images/hphone1.gif"><a href="?action=register">&nbsp;&nbsp;Register</a><br><br>

<IMG src="/images/hphone2.gif"> <a href="?action=faq">&nbsp;&nbsp;FAQ</a><br><br>

<IMG src="/images/hphone3.gif"> <a href="?
action=terms">&nbsp;&nbsp;Terms Of Use</a><br><br>

<IMG src="/images/hphone4.gif"> <a href="?action=contact">&nbsp;&nbsp;Contact Us</a><br><br>


<IMG src="/images/hphone5.gif"><a href="?action=forgotpass">&nbsp;&nbsp;Forgot Password</a><br><br>

<IMG src="/images/hphone6.gif"><a href="?action=forgotusername">&nbsp;&nbsp;Forgot Username</a><br></font>

<ul >
 <p><strong>Alberta</strong></p>
 <li>Airdrie</li>
 <li>Brooks</li>
 <li>Calgary</li>
 <li>Camrose</li>
 <li>Cochrane</li>
 <li>Edmonton</li>
 <li>Fort McMurray</li>
 <li>Grande Prairie</li>
 <li>Leduc</li>
 <li>Lethbridge</li>
 <li>Medicine Hat</li>
 <li>Okotoks</li>
 <li>Red Deer</li>
 <li>Saint Albert</li>
 <li>Spruce Grove</li>
</ul>

 <ul>
  <p><strong>British Columbia</strong></p>
 <li>Abbotsford</li>
 <li>Campbell River</li>
 <li>Chilliwack</li>
 <li>Courtenay</li>
 <li>Duncan</li>
 <li>Kamloops</li>
 <li>Kelowna</li>
 <li>Nanaimo</li>
 <li>Penticton</li>
 <li>Port Alberni</li>
 <li>Prince George</li>
 <li>Vancouver</li>
 <li>Vernon</li>
 <li>Victoria</li>
 <li>White Rock</li> 
 </ul>
 
 <ul>
  <p><strong>Manitoba</strong></p>
 <li>Altona</li>
 <li>Brandon</li>
 <li>Dauphin</li>
 <li>Flin Flon</li>
 <li>Morden</li>
 <li>Neepawa</li> 
 <li>Selkirk</li>
 <li>Steinbach</li>
 <li>Stonewall</li>
 <li>Swan River</li>
 <li>The Pas</li>
 <li>Thompson</li>
 <li>Virden</li>
 <li>Winkler</li>
 <li>Winnipeg</li>
 </ul>

<ul>
  <p><strong>New Brunswick</strong></p>
 <li>Bathurst</li>
 <li>Campbellton</li>
 <li>Caraquet</li>
 <li>Dalhousie</li>
 <li>Edmundston</li>
 <li>Fredericton</li>
 <li>Grand Falls</li>
 <li>Moncton</li>
 <li>Oromocto</li>
 <li>Saskvillee</li>
 <li>Saint John</li>
 <li>Saint Stephen</li>
 <li>Shediac</li>
 <li>Sussex</li>
 <li>Woodstock</li>
 </ul>
 
 <ul>
  <p><strong>Newfoundland and Labrador</strong></p>
 <li>Bay Roberts</li>
 <li>Carbonear</li>
 <li>Channel-Port aux Basques</li>
 <li>Conception Bay South</li>
 <li>Corner Brook</li>
 <li>Gander</li>
 <li>Goose Bay</li>
 <li>Grand Bank</li>
 <li>Grand Falls-Windsor</li>
 <li>Labrador City</li>
 <li>Marystown</li>
 <li>Mount Pearl</li>
 <li>Paradise</li>
 <li>Saint Johns</li>
 <li>Stephenville</li>
 </ul>

ul {
  float: left;
  width:auto
  list-style-type: none;
}

<div id="content">
	
	 <span>
	<ul style="list-style-type: none; display: inline-block;">
      <li><strong>Alberta</strong></li>
      <li><strong>British Columbia</strong></li>
      <li><strong>Manitoba</strong></li>
      <li><strong>New Brunswick</strong></li>
      <li><strong>Newfoundland and Labrador</strong></li>
      <li><strong>Nova Scotia</strong></li>
      <li><strong>Ontario</strong></li>
     
   </ul>

   <ul style="list-style-type: none; display: inline-block;">
      <li>Calgary</li>
      <li>Kamloops</li>
      <li>Altona</li>
      <li>Bathurst</li>
      <li>Bay Roberts</li>
      <li>Amherst</li>
      <li>city name</li>
      <li>Edmonton</li>
      <li>Kelowna</li>
      <li>Brandon</li>
      <li>Campbellton</li>
      <li>Carbonear</li>
      <li>Antigonish</li>
      <li>city name</li>
      <li>Lethbridge</li>
       <li>Nanaimo</li>
      <li>Dauphin</li>
      <li>Caraquet</li>
      <li>Channel-Port</li>
      <li>Bridgewater</li>
      <li>city name</li>
      <li>Red Deer</li>
      <li>Penticton</li>
      <li>Flin Flon</li>
      <li>Dalhousie</li>
      <li>aux Basques</li>
      <li>Glace Bay</li>
      <li>city name</li>
      <li>&nbsp;</li>
      <li>Prince Rupert</li>
      <li>Morden</li>
         <li>Edmundston</li>
      <li>Conception Bay</li>
      <li>Halifax</li>
      <li>city name</li>
      <li>&nbsp;</li>
      <li>Tofino</li>
      <li>Neepawa</li>
      <li>Fredericton</li>
      <li>South</li>
      <li>Kentville</li>
      <li>city name</li>
      <li>&nbsp;</li>
      <li>Vancouver</li>
      <li>Selkirk</li>
      <li>Grand Falls</li>
      <li>Corner Brook</li>
      <li>New Glasgow</li>
      <li>city name</li>
      <li>&nbsp;</li>
      <li>Victoria</li> 
      <li>Steinbach</li>
      <li>Moncton</li>
      <li>Gander</li>
      <li>New Waterford</li>
      <li>city name</li>
      <li>&nbsp;</li>
      <li>Whistler</li>
      <li>Stonewall</li>
      <li>Oromocto</li>
      <li>Goose Bay</li>
      <li>Pictou</li>
      <li>city name</li>
      <li>&nbsp;</li>
      <li>Williams Lake</li>
      <li>Swan River</li>
      <li>Sackville</li>
      <li>Grand Bank</li>
      <li>Port Hawkesbury</li>
      <li>city name</li>
      <li>&nbsp;</li>
      <li>&nbsp;</li>
      <li>The Pas</li>
      <li>Saint John</li>
      <li>Saint John</li>
      <li>Grand Falls</li>
      <li>Springhill</li>
      <li>&nbsp;</li>
      <li>&nbsp;</li>
      <li>&nbsp;</li>
      <li>Thompson</li>
      <li>Saint Stephen</li>
      <li>-Windsor</li>
      <li>Sydney</li>
      <li>&nbsp;</li>
      <li>&nbsp;</li>
      <li>&nbsp;</li>
      <li>Virden</li>
      <li>Shediac</li>
      <li>Marystown</li>
      <li>Sydney Mines</li>
      <li>&nbsp;</li>
      <li>&nbsp;</li>
      <li>&nbsp;</li>
      <li>Winkler</li>
      <li>Sussex</li>
      <li>Mount Pearl</li>
      <li>Truro</li>
      <li>&nbsp;</li>
      <li>&nbsp;</li>
      <li>&nbsp;</li>
      <li>Winnipeg</li>
      <li>Woodstock</li>
      <li>Paradise</li>
      <li>Yarmouth</li>
      <li>city name</li>
      <li>&nbsp;</li>
      <li>&nbsp;</li>
      <li>&nbsp;</li>
      <li>&nbsp;</li>
      <li>Saint Johns</li>
      <li>&nbsp;</li>
      <li>city name</li>
      <li>&nbsp;</li>
      <li>&nbsp;</li>
      <li>&nbsp;</li>
      <li>&nbsp;</li>
      <li>Stephenville</li>
      <li>&nbsp;</li>
      <li>city name</li>
      <li>&nbsp;</li>   
   </ul>
   
   &nbsp;
  
   <hr>
   
  &nbsp;
   
    <ul style="list-style-type: none; display: inline-block;">
      
      <li><strong>Prince Edward Island</strong></li>
      <li><strong>Quebec</strong></li>
      <li><strong>Saskatchewan</strong></li>
   </ul>

   <ul style="list-style-type: none; display: inline-block;">
      <li>city name</li>
      <li>city name</li>
      <li>city name</li>
    </ul>
   
   
   
<span>
		
	</div><!-- End content-->

@charset "UTF-8";
/* CSS Document */

#wrapper {
	background-color:#FFF;
	width: 780px;
	margin: auto;
}

/* --- navigation starts --- */

#header {
	width: 100%;
	height: 229px;
	margin: auto;
}	

#header img {
	width: 100%;
	height: 100%;
}

ul {
    display: block;
    width: 100%;
    font-family: Arial, Verdana;
   font-size: 14px;
    margin: 0;
   padding: 0;
   list-style: none;
}

ul li {
	width: 111px;
	text-align: center;
	display: block;
	position: relative;
	float: left;
}

li ul { 
    display: none;
	position: relative;
    z-index: 1;
    
	
}

ul li a {
	display: block;
	text-decoration: none;
	color: #ffffff;
	border-top: 1px solid #ffffff;
	padding: 5px 15px 5px 15px;
	background: #2C5463;
	margin-left: 1px;
	white-space: nowrap;
}

ul li a:hover { 
	background: #617F8A; 
}

li:hover ul {
	display: block;
	position: absolute;
}

li:hover li {
	float: none;
	font-size: 11px;
}

li:hover a { 
	background: #617F8A; 
}

/* --- navigation ends --- */

/* --- information starts --- */

#content
{
	position: relative;
	top: 40px;
	font-size:16px;
	font-family: Verdana, Geneva, sans-serif;
}




#footer {
	margin-top: 100px;
	text-align: center;
}	

/* --- information ends --- */

	
/* --- Advertising starts --- */

#adverts {
	width: 95%;
	margin: auto;
	text-align: center; /* Only to align alternate image text for visulization */
}

#adverts #addWarning {
	float: left;
	font-size: smaller;
}	

#adverts #single {
	clear: both;
}	

#adverts #single img {
	width: 100%;
}

#adverts .double img {
	width: 50%;
	display: inline-block;
	float: left;
}

#adverts .trible img {
	width: 33%;
	display: inline-block;
	float: left;
}



/* --- Advertising Ends --- */

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Language" content="en-us">
<link rel='stylesheet' href='style.css' type='text/css' />
<title>Awortinkos</title>


<!--Fireworks CS3 Dreamweaver CS3 target.  Created Sun Feb 17 22:55:26 GMT+0500 (West Asia Standard Time) 2008-->
</head>
<br> <table align='center' width='60%' cellspacing="4" cellpadding='0'>
         <tr>
         <td align='center'  width='80%'>
<table width="900" align=center cellpadding="0" cellspacing="0" border="0"
style="background-color: #393939; border-bottom-width:0px">
<tr>
<td width="14"><img src="http://www.awortinkos.com/test2/images/1.gif" width="14" 
height="14" border="0" alt="..." /></td>

<td width="171" style="border-top-style: solid; border-top-width: 1px" bordercolor="#008000" rowspan="2">
<p align="center"><b><font face="Verdana" size="2" color="#FFFFFF">chatroom</font></b></td>

<td width="701" style="border-top-style: solid; border-top-width: 1px" bordercolor="#008000" rowspan="2">
<p align="center"><b><font face="Verdana" size="2" color="#FFFFFF">content</font></b></td>

<td width="14"><img src="http://www.awortinkos.com/test2/images/2.gif" width="14"
height="14" border="0" alt="..." /></td>

</tr>

<td>&nbsp;</td>
</table>
<body bgcolor="#eeeee4" topmargin="0" valign=top leftmargin="0">
<div align="center">
  <center>
<table border="0" cellpadding="0" cellspacing="0" width="927" >
<!-- fwtable fwsrc="temp.png" fwpage="Page 1" fwbase="index.jpg" fwstyle="Dreamweaver" fwdocid = "355425286" fwnested="0" -->
  <tr>
   <td width="13"><img src="http://www.awortinkos.com/test2/images/spacer.gif" width="12" height="1" border="0" alt="" /></td>
   <td width="6"><img src="http://www.awortinkos.com/test2/images/spacer.gif" width="6" height="100%" border="0" alt="" /></td>
   <td width="179"><img src="http://www.awortinkos.com/test2/images/spacer.gif" width="165" height="1" border="0" alt="" /></td>
   <td width="527"><img src="http://www.awortinkos.com/test2/images/spacer.gif" width="484" height="1" border="0"  ></td>
   <td width="179"><img src="http://www.awortinkos.com/test2/images/spacer.gif" width="166" height="100%" border="0" alt="" /></td>
   <td width="7"><img src="http://www.awortinkos.com/test2/images/spacer.gif" width="4" height="1" border="0" alt="" /></td>
   <td width="14"><img src="http://www.awortinkos.com/test2/images/spacer.gif" width="12" height="1" border="0" alt="" /></td>
   <td width="2"><img src="http://www.awortinkos.com/test2/images/spacer.gif" width="1" height="1" border="0" alt="" /></td>
  </tr>

  <tr>
   <td rowspan="6" width="13" >&nbsp;</td>
   <td rowspan="6" valign="top" bgcolor="#393939" width="6">&nbsp;</td>
   <td valign="top" width="179">
	
		</td>
   <td colspan="2" valign="top" width="706">
	
		<p align="center"></td>
   <td rowspan="8" valign="top" bgcolor="#393939" width="6">&nbsp:</td>
   <td rowspan="6" &nbsp;</td width="14">
   <td width="2" rowspan="4"><img src="http://www.awortinkos.com/test2/images/spacer.gif" width="1" height="168" border="0" alt="" /></td>
  </tr>
  <tr>
   <td valign="top" width="179" rowspan="2">
	
		&nbsp;</td>
   <td colspan="2" valign="top" width="706">
	
		&nbsp;</td>
   </tr>
<tr>
   <td colspan="2" valign="top" width="706" rowspan="2">
	
		&nbsp;<p>&nbsp;</p>
		<p>&nbsp;</p>
		<p>&nbsp;</p>
		<p>&nbsp;</td>
   </tr>
<tr>
   <td valign="top" width="179">
	
		&nbsp;<p>&nbsp;</p>
		<p>&nbsp;</p>
		<p>&nbsp;</p>
		<p>&nbsp;</p>
		<p>&nbsp;</td>
   </tr>
  <tr>
   <td colspan="3">
   <table border="0" cellpadding="6" cellspacing="0"   width="100%" background="images/menu_back.jpg">
    <tr>
       <td width="100%" align="right">&nbsp;</td>
     </tr>
    <tr>
       <td width="100%" align="right" bgcolor="#393939">&nbsp;</td>
     </tr>
   </table>

   </td>
   <td width="2"><img src="http://www.awortinkos.com/test2/images/spacer.gif" width="1" height="22" border="0" alt="" /></td>
  </tr>

<table>
  <tr>
    <td><a href="" target="_new"><img src="menu/Logo.png" width="139" height="155" alt="Back to home page" border="0"></a></td>
	
    <td><a href="" target="_new"><img src="menu/Drafting.png" width="98" height="65" alt="Drafting" border="0"></a></td>
	
    <td><a href="" target="_new"><img src="menu/Programming.png" width="157" height="65" alt="Programming" border="0"></a></td>
	
    <td><a href="" target="_new"><img src="menu/Resume.png" width="93" height="65" alt="Resume" border="0"></a></td>
	
     <td><a href="" target="_new"><img src="menu/Contact.png" width="96" height="65" alt="Contact" border="0"></a></td>
  </tr>
</table>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title>Scroll</title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
	<style type="text/css">
	.top{
		position: absolute;
		top:0;
		right:0;
		background-image: url('uparrow.png');
		background-size: 16px 16px;
		width: 16px;
		height: 16px;
	}

	.btm{
		position: absolute;
		display:block;
		background-image: url('downarrow.png');
		background-size: 16px 16px;
		width: 16px;
		height: 16px;
		bottom: 0;
		right: 0;
	}
	</style>
	<script type="text/javascript">
	
		function scrollup(objId){
			alert("Scroll UP");
			console.log(objId);
			var a = document.getElementById(objId).style.top;
			console.log(a);
		}

		function scrolldown(objId){
			alert("Scroll DOWN");
			var b= document.getElementById(objId).style.btm;
			console.log(objId);
			console.log(b);
		}
	</script>
 </head>

 <body>
<div id="scrollDiv" style="btm:0px">
	This is what i like to say.
</div>
<div class="top" onclick="scrollup('scrollDiv')"></div>
<div class="btm" onclick="scrolldown('scrollDiv')"></div>
 </body>
</html>