My footer won't stretch the full width. If I put the position as fixed, then it sits on the page in the same place on the page at all times and overlaps over my other layers as I scroll. What should I do to fix this problem?

CSS:

Code:
/*
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License
*/


body {
	font-family: ‘Lucida Sans Unicode’, sans-serif;
	background: url(images/computerhand.jpg) repeat;
	font-size: 12px;
	color: #f2f2f2;  
}

h1, h2, h3, h4, h5, h6, h7, h8 {
	font-family: trebuchet ms;
	text-transform: none;
	font-weight: normal;
	color: #f2f2f2;
}


h1 {
	margin: auto;
	float: middle;
	padding: 0px 10px 10px 10px;
	font-size: 36px;
}

h2 {
	margin-bottom: 10px;
	border-bottom: 1px solid #C3D4EB;
	font-size: 36px;
}

h3 {
	margin-bottom: 10px;
	padding-bottom: 2px;
	border-bottom: 1px solid #C3D4EB;
	font-size: 20px;
	
}

h4 {
	margin-bottom: 10px;
	padding-bottom: 2px;
	font-size: 20px;
	
}

h5 {
	margin-bottom: 3px;
	padding-bottom: 3px;
	font-size: 12px;
	
}

h6 {
	padding: 46px 20px 0px 20px;
	font-size: 14px;
}

h7 {
	margin-bottom: 2px;
	padding-bottom: 2px;
	font-size: 20px;
	
}

h8 {
	float: middle;
	padding: 0px 100px 0px 0px;
	margin-bottom: 0px;
	padding-bottom: 0px;
	font-size: 20px;
	border-bottom: 1px solid #C3D4EB;
}
	


p, ol, ul, blockquote {
	line-height: 24px;
}

ul {
	margin-left: 0;
	padding-left: 0;
	list-style: none;
}



img {
	border: none;
}



a:link {
color: #9C1313;
text-decoration: none;
}
a:visited {
color: #9C1313;
text-decoration: none;
}
a:hover {
color: #C5D9D8;
text-decoration: none;
}
a:active {
color: #D5E8E8;
text-decoration: none;
}


#header {
	position: absolute;
	width: 100%;
	height: 140px;
	margin: 0 auto;
	top: 0;
	left: 0;
	background: url(images/body.png);
	border-bottom: #FFFFFF solid 2px;
}



#logo {
	position: inherit;
	margin: 20px 0px 0px 170px;
	float: left;
}

#logo * {
	text-decoration: none;
}

#logo h1 {
	float: left;
	padding: 10px 0 0 0;
	font-size: 36px;
}

#logo h1 a {
	color: #ffffff;
}



#logo h2 {
	float: left;
	padding: 0px 0px 0 0px;
	font-size: 12px;
	border: none;
}

#logo h2 a {
	color: #ffffff;
}

/* Menu */


#menu-bar {
	height: 15px;
	padding: 45px 170px 35px 0px;
	margin: 0 auto;
	opacity:0.85;
	border: solid 0px #6D6D6D;
}

#menu-bar li {
	position: inherit;
  float: right;
  width: 160px;
  margin: 0px 0px 0px 1px;
  padding: 0px 0px 5px 0px;
  display: in-line;
  position: relative;
  list-style: none;
}
#menu-bar a {
  font-weight: none;
  font-family: trebuchet ms;
  font-style: none;
  text-transform: uppercase;
  font-size: 13px;
  color: #f2f2f2;
  text-decoration: none;
  display: block;
  padding: 8px 20px 9px 20px;
  border-left: 1px solid #304152;
  margin: 0;
  border-radius: 0px;
  text-shadow: 0px 0px 0px #FFFFFF;
}


#menu-bar .current a, #menu-bar li:hover > a {    
  background: none;
  text-shadow: 0px 0px 0px #FFFFFF;
  -webkit-transition:all .8s;
-moz-transition:all .8s;
-o-transition:all .8s;
-ms-transition:all .8s;

}



#menu-bar ul li:hover a, #menu-bar li:hover li a {
  width: 154px;
  background: none;
  opacity:0.85;
  border: none;
  color: #666;
  -box-shadow: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -webkit-transition:all .8s;
-moz-transition:all .8s;
-o-transition:all .8s;
-ms-transition:all .8s;

}
#menu-bar ul a:hover {
  background: #000330 !important;
  opacity:0.9;
  color: #f2f2f2 !important;
  border-radius: 0;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  text-shadow: 0px 0px 0px #FFFFFF;
  -webkit-transition:all .8s;
-moz-transition:all .8s;
-o-transition:all .8s;
-ms-transition:all .8s;

}
#menu-bar ul {
  float: right;
  width: 1111px;
  background: ;
  display: none;
  margin: 0;
  padding: 0;
  width: 100%;
  position: absolute;
  top: 40px;
  left: 0;
  border: solid 0px #B4B4B4;
  box-shadow: rgba(0,0,0,0.2) 0px 2px 3px, inset rgba(0,0,0,0.2) 0px -1px 2px;
    border-radius: 20px;
  border-radius: 0px;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
}
#menu-bar li:hover > ul {
  display: block;
  -webkit-transition:all .8s;
-moz-transition:all .8s;
-o-transition:all .8s;
-ms-transition:all .8s;
}
#menu-bar ul li {
  width: 100%;
  float: none;
  margin: 0;
  padding: 0;
}
#menu-bar ul a {
  padding: 7px 0px 7px 7px;
  color:#0C093B !important;
  font-size:11px;
  font-style:normal;
  font-family:lucida sans unicode;
  font-weight: normal;
  text-shadow: 0px 0px 0px #FFFFFF;
}
#menu-bar ul li:first-child > a {
  border-top-left-radius: 0px;
  -webkit-border-top-left-radius: 0px;
  -moz-border-radius-topleft: 0px;
  border-top-right-radius: 0px;
  -webkit-border-top-right-radius: 0px;
  -moz-border-radius-topright: 0px;
}
#menu-bar ul li:last-child > a {
  border-bottom-left-radius: 0px;
  -webkit-border-bottom-left-radius: 0px;
  -moz-border-radius-bottomleft: 0px;
  border-bottom-right-radius: 0px;
  -webkit-border-bottom-right-radius: 0px;
  -moz-border-radius-bottomright: 0px;
}
#menu-bar:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
#menu-bar {
  display: inline-block;
}
  html[xmlns] #menu-bar {
  display: block;
}
* html #menu-bar {
  height: 5px;
}



#wrap {
	text-align: left;
	width: 1200px;
	margin: 0 auto;

}

/* Content */

#content {
	margin: 230px 0px 100px 0px;
	width: 1200px;
	background: url(images/body.png);
	box-shadow: 1px 1px 5px #070C2E;
	font-size: 13px;
	color: #f2f2f2;
}


#colOne {
	float: center;
	width: 995px;
	padding: 20px 25px 25px 50px;
	text-decoration: none;
}

.wrapper {
min-height: 100%;
height: auto !important;
margin: 0 auto -37px;
}

#footer  {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	position: relative;
	height: 50px;
	width: 100%;
	padding: 0 0 0 0;
	background: url(images/body.png);
	background-size: 100%;
	border-top: #FFFFFF solid 2px;
}


Here is the page code where I have my footer located
Code:
	<p>	
		
	
		
	</div>
</div>	
</div>

<centeR>
<div class="wrapper">
<?php require("page/footer2.php")?>
</div>
</center>


</body>
</html>

Here is the page with the footer information that it calls up:
Code:
<style type="text/css">
a:link {text-decoration:none;}    /* unvisited link */
a:visited {text-decoration:none;} /* visited link */
a:hover {text-decoration:underline;color:#304152}   /* mouse over link */
a:active {text-decoration:underline;}  /* selected link */
</style>

<div id="footer">
<font color="#06182E">
<p>
<p><strong>Copyright 2009 Corbell Telephone & Electronics, Inc.</strong>
	</font>
	
	</div>