Hello, I'm having problem with my footer. At the moment I'd like it stuck to the bottom of the browser window, and whilst it will do that with the below code in the browser am using it breaks the middle part of the website page. I've applied it to this page: www.jonpaulwild.co.uk/contact/error (an error mailing page) I've not changed the xhtml for the rest of the site as it's something I've just noticed I need to do with small content. Again website is very much under construction. It will be something minor that I'm missing or done wrong.

 

@charset "utf-8";
/* Start Misc*/
* { margin: 0; padding: 0; }
html, body {font-family: Arial, Helvetica, sans-serif; font-size: 13px; background-color: #252525; height: 100%}
p, h1, h2 {line-height: 18px;}
img {border: 0;}
p {margin-top: 10px; padding-bottom: 20px; text-align:left; font-size: 13px; font-weight: normal; color: #666666;}
h1 {margin-left: 40px; width: 200px; margin-top:0; padding-top: 55px; color: white; font-size:17px; font-family:Arial, Helvetica, sans-serif; text-align:center;}
h2 {font-size:16px; font-family: Arial, Helvetica, sans-serif; text-align:left; font-weight: bold; color:#006600; padding-bottom: 30px;}
h3 {color:#CC0066; font-size: 14px; font-family:Arial, Helvetica, sans-serif; padding-bottom: 10px;}
.clear {clear:both}
/* End Misc-------------------------------------------------------------------------------------------------------- */
#container{ position:relative; height: auto; height: 100%; min-height: 100%;}
/* Begin Header-------------------------------------------------------------------------------------------------------- */
#headerwrapper {width: 100%; height: 100px; background-color: #FFFFFF; width: 100%;}
#header {width: 800px; height: 100px; margin: 0 auto;}
#headerleft {margin-top: 10px; width:400px; height: 82px; float:left; background-color: transparent;}
#headerright {margin-top: 20px; margin-left: 160px; width:191px; height: 53px; float:right; background-color:transparent;}
/* End Header-------------------------------------------------------------------------------------------------------- */
/*Start Main navigation-------------------------------------------------------------------------------------------------------- */
#navwrapper {width: 100%; clear:both; background-color:#006633; background-image:url(../images/prinavbg.jpg); background-repeat:repeat-x; height: 42px;}
#prinav {background: url(../images/buttons.jpg);height: 42px; width: 483px; margin: 0px auto; position: relative;}
#prinav li {list-style-type: none; float: left;}
#prinav a {height: 42px; display: block;}
#home { width: 121px; }
#about { width: 120px; }
#services { width: 120px; }
#contact { width: 122px; }
#home a:hover {background: url(../images/buttons.jpg) 0px -42px no-repeat;}
#about a:hover {background: url(../images/buttons.jpg) -121px -42px no-repeat;}
#services a:hover {background: url(../images/buttons.jpg) -241px -42px no-repeat;}
#contact a:hover {background: url(../images/buttons.jpg) -361px -42px no-repeat;}
.home #prinav li#home a {background: url(../images/buttons.jpg) 0px -84px no-repeat;}
.about #prinav li#about a {background: url(../images/buttons.jpg) -121px -84px no-repeat;}
.services #prinav li#services a {background: url(../images/buttons.jpg) -241px -84px no-repeat;}
.contact #prinav li#contact a {background: url(../images/buttons.jpg) -361px -84px no-repeat;}
/* End Main Navigation--------------------------------------------------------------------------------------------------------------- */
/* Begin Secondary Navigation --------------------------------------------------------------------------------------------------------*/
#secnav {width: 100%; background-image:url(../images/secnavbg.jpg); background-repeat:repeat-x; background-color: #FFCC00; height: 24px;}
#secnav ul {margin: 0 auto; width: 700px; text-align: center; height: 20px; background-color: transparent; padding-top: 4px;}
#secnav li {display:inline; padding-left: 30px; padding-right: 30px; font-size:12px; font-family:Arial, Helvetica, sans-serif; font-weight: normal;}
#secnav li a {text-decoration: none; color: #3f3f3f}
#secnav li a:visited {color: yellow;}
#secnav li a:hover {color: yellow; text-decoration:underline;}
#secnav li a:active {color: yellow;}
#secnav li a.selected {color: purple;}
/* End Secondary Navigation------------------------------------------------------------------------------------------------------ */
/* Begin Content - Global-------------------------------------------------------------------------------------------------------- */
#content_wrapper{width: 100%; margin: 0 auto; height: auto; background-image:url(../images/contentbg.jpg); background-repeat:repeat-x; background-position:top;  background-color: #ececec; padding-bottom: 100px;}
#content_wrapper_header {width: 741px; margin: 0 auto; height: 105px; background-image:url(../images/contenttop.jpg); background-repeat:no-repeat;;}
#content_wrapper_page{height: auto; margin: 0 auto; width: 741px; background-image: url(../images/contenttop.jpg); background-position: 0px -105px; background-repeat:no-repeat; padding-bottom: 40px;}
/* End Content - Global-------------------------------------------------------------------------------------------------------- */
/*Begin About - Company-------------------------------------------------------------------------------------------------------- */
#companycontent {float: left; height: auto; padding-left: 35px; padding-right: 30px; padding-top: 30px; margin-top: 0px;}
#companycontent img {float:right; width: 240px; height: 143; border-width: 1px; border-style:solid; border-color: #CCCCCC; margin-bottom: 10px; margin-left: 10px;}
.companyfact{padding-top: 25px; padding-bottom: 25px;}
.companyfact li {color: green; font-weight: bold; background-image:url(../images/tick.jpg); background-repeat:no-repeat; background-position: left center; list-style-type: none; list-style-image: none; padding-top: 0px; padding-right: 0px; padding-bottom: 1px; padding-left: 50px; margin-top: 0px; margin-right: 0px; margin-bottom: 30px; margin-left: 60px; line-height: 25px; font-size: 13px;}
/*End About - Company ------------------------------------------------------------------------------------------------------ */
/* Begin Customers --------------------------------------------------------------------------------------------------------- */
#customer_content {float: left; height: auto; padding-left: 35px; padding-right: 30px; padding-top: 30px; margin-top: 0px;}
#customer_content img {float: right; width: 241px; height: 286px; margin-top: -147px;}
#customer_blocks  {margin-left: 90px;}
#customer_blocks li {list-style: none; display:block; float: left; padding: 10px;}
#customer_blocks img {border-style:solid; border-width: 1px; border-color: #CCCCCC; width: 156px; height: 105px;}
/* End Customers ------------------------------------------------------------ */
/* Begin Contact ------------------------------------------------------------ */
#map {margin-left: 25px;   width: 700px; height: 270px;}
#contact_content {float: left; height: auto; padding-left: 35px; padding-right: 30px; padding-top: 30px; margin-top: 0px; width: 410px}
#contact_content_right {float: right; height: auto; padding-left: 35px; padding-right: 30px; padding-top: 30px; margin-top: 0px; width: 199px}
label {color: green; font-size: 12px; font-weight: bold;}
input {height: 25px}
input, textarea {border: solid;border-style:solid; border-width: 1px; background-color: #EBE0FE; border-bottom-color: #999999; border-left-color: #666666; border-top-color: #666666; border-right-color: #999999}
submit {color:#FFFF00; border: none;}
.btn {height: 35px; width: 109px; border: none; background:url(../images/submit.jpg); background-repeat:no-repeat;}
.btn:hover {background: url(../images/submit.jpg) 0px 35px; background-repeat:no-repeat}
#map a {color: green; font-size: 10px; font:Arial, Helvetica, sans-serif; text-align:center;}
#map iframe {border:solid; border-color:#009900; border-width: 1px;}
/* End Contact ------------------------------------------------------------ */
/* Begin contact - vacancies------------------------------------------------------------ */
#vacancies_content {float: left; height: auto; padding-left: 35px; padding-right: 30px; padding-top: 30px; margin-top: 0px;}
#vacancies_content a {text-decoration: underline; color: orange; font-weight: normal}
#vacancies_content a:visited {color: yellow;}
#vacancies_content a:hover {color: yellow; text-decoration:underline;}
/* End contact - vacancies ------------------------------------------------------------ */
#footerwrapper {width: 100%; height: 100px; background-color: #333333; border-top-width: 3px; border-top-color: #FFCC00; border-top-style: solid; position:relative;}
#footer {margin: 0 auto;  height: 100px; width: 700px;}
#footernav {color:#CCCCCC; text-decoration:underline; height: auto; font-size:10px; margin-top: 0px;}
#footerleft {float: left; width: 500px; height: auto; margin-top: 10px;}
#footerright{float: right; width: 200px; height: auto; margin-top: 10px;}
#footerleft p {color:#CCCCCC; margin-top: 0px; padding-top: 0px; text-align: left;font-size: 10px; text-decoration: none; padding-bottom: 2px; }
#footerright p {color:#FFFFFF; margin-top: 0px; padding-top: 0px; text-align:right;font-size: 10px; text-decoration:none; padding-bottom: 2px;}

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>About the Company - Our Customers</title>
<link href="../css/master.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="headerwrapper">
<div id="header">
	<div id="headerleft"><img src="../images/logo.jpg" alt="logo"/></div>
	<div id="headerright"><img src="../images/phone.jpg" alt="phone"/></div>
	<div class="clear"></div>
</div><!-- end header -->
</div><!-- end header wrapper -->
<div id="navwrapper" class="contact">
<ul id="prinav">
	<li id="home"><a href="/"></a></li>
	<li id="about"><a href="/about"></a></li>
	<li id="services"><a href="/services"></a></li>
	<li id="contact"><a href="/contact"></a></li>
</ul><!-- end the prinav ul list-->
</div><!-- end nav wrapper -->
<div id="secnav">
<ul>
	<li><a href="/contact">Contact Us</a></li> 
	<li><a href="/contact/vacancies"  class="selected">Vacancies</a></li>
</ul>
</div><!-- end secnav -->
<div id="content_wrapper">
<div id="content_wrapper_header">
 <h1>Error</h1>
</div><!-- content_wrapper_header -->
<div id="content_wrapper_page">
<div id="vacancies_content">
<h2>Error?</h2>
<p>Unfortunatly your e-mail has failed. Please try again. This is due to the spam prevention software implemented.</p>
<p> </p>
<p> </p>
 <p> </p>
</div><!----end vacancy content --->
<div class="clear"></div><!-- dlear -->			   	
</div><!-- end content wrapper page -->
</div><!--end content wrapper -->
</div><!--end container -->
<div id="footerwrapper">
<div id="footer">
	<div id="footerleft">
	<div id="footernav">Site Map</div>
		<p>Copyright © </p>
		<p>Registered office:  2NE</p>
		<p>Company No. 359 548 4584 12</p>
	</div><!-- end footerleft -->
<div id="footerright"><p>This website is a test site</p></div>
<div class="clearboth"></div>
</div><!--end footer-->
</div>
<!--end footerwrapper -->
</body>
</html>

If you want the footer to stick to the bottom of the page when there is not much content above; edit #footerwrapper to make it position: fixed and edit #contentwrapper to give it padding-bottom equal to the #footerwrapper height so that in small windows the #footerwrapper sits in the padding and doesn't cover any of the content above:-

 

#content_wrapper{width: 100%; margin: 0 auto; height: auto; 
background-image:url(../images/contentbg.jp );
background-repeat:repeat-x; background-position:top; 
background-color: #ececec; padding-bottom: 103px;}

#footerwrapper {width: 100%; height: 100px; background-color: #333333; 
border-top-width: 3px; border-top-color: #FFCC00; border-top-style: 
solid; /*position:relative;*/ position: fixed; bottom: 0; }

 

You can't add padding or margin to the bottom of #container as that is height: 100% and you don't want to make it more than 100% so the space for the #footerwrapper is added to the next div inside which is #contentwrapper.

 

I edited this part of the html file because you don't need the <p> </p> to make space and one of the <!----- had too many --

.............software implemented.</p>
<!--<p> </p>
<p> </p>
 <p> </p>-->
</div><!--end vacancy content -->
<div class="clear"></div><!-- clear -->			   	
</div><!-- end content wrapper page -->
</div><!--end content wrapper -->
</div><!--end container -->
<div id="footerwrapper">..............

Okay a few problems:

 

1) The footer sticks to the browser window like glue, but as I move the window the footer goes over the content - I don't want that to happen. I want the footer stuck to the bottom if there is little content on the page so it's not half way up the page

 

2) There is still a problem getting the content wrapper or the footer to 'connect' and thus there is a big gap between the sections.

 

http://www.jonpaulwild.co.uk/contact/error

1) The footer sticks to the browser window like glue, but as I move the window the footer goes over the content - I don't want that to happen. I want the footer stuck to the bottom if there is little content on the page so it's not half way up the page

 

The footer doesn't move halfway up the page with my code:-

http://www.wickham43.com/forumposts/jpw091018.html

http://www.wickham43.com/forumposts/jpw091018.css

 

2) There is still a problem getting the content wrapper or the footer to 'connect' and thus there is a big gap between the sections.

 

The footer code I used means that if there is little content, there will be a space above the footer stuck to the window bottom. If there is a lot of content, the footer is still at the window bottom and the content scrolls from below it.

 

There is another footer method where the footer isn't always visible; it disappears below the content if there is a lot of content, but sticks to the bottom if there isn't much content:-

http://www.wickham43.net/footerfix.php make the window small in height and the footer will disappear.

Thanks for your help Wickham. The http://www.wickham43.com/footerfix version is what I'm after. Can you suggest alterations tomy original code based on the above link? Obviously the layout in that link is different to my layout.