My footer won't stretch the full width

HTML & CSS
1

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:

/*
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

	<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:

<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>
2

Hi Welcome to Sitepoint :slight_smile:

You seem to asking a couple of questions here so I may be guessing a little here.

My footer won’t stretch the full width.

If your footer is inside another element that has a width defined then it won’t go full width but unfortunately you have not shown enough html for us to make that observation although it does look like your footer is on its own and therefore should be 100% wide (apart from body margins/padding). Make sure the footer is outside any other parent elements and it will automatically stretch full width. We really need the full html and css to make proper observations.

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?

This seems like anther question?

If you want a fixed footer then it will sit on the bottom of the viewport window (not the bottom of the document) and remain fixed there while the page scrolls. You then will have to ensure that the last element on the page (excluding the footer of course) has some padding-bottom equal to the height of the footer so that you can still scroll the content up until you can see it above the footer.

It sounds to me as though you may want a sticky footer and we have FAQ will all the information you need to construct one but it does need to be done precisely as instructed.

(BTW that is some old HTML you have and needs a bit of modernisation - I haven’t seen a font tag in years and they shouldn’t be used these days as that is what css is for:))