CSS Footer Problem

Atomic

Atomic

Atomic

Associate
Joined
27 Jan 2005
Posts
830
I've got a website that's far from finished and I'm trying to sort out the footer. I need the footer to be 'stuck' to the footer but doesn't go over the actual content when window size is changed. I don't want the footer halfway up the page if I have little content on one of the pages.

I also have a problem in which a big ugly gap has open up between my content wrapper and footer, and of course, this gap should not be there.

Code: 
@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;}
Code: 
<!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>&nbsp;</p>
<p>&nbsp;</p>
  <p>&nbsp;</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 &copy; </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>
 
Thanks for y our reply. You posted something else elsewhere on forum:
What I think he wants is a fixed height in pixels for header and footer. and an expanding middle.

But here is the hard bit, he wants the footer to always sit at the bottom of the browser window. To do that he needs the middle bit to auto expand the browser height minus the footer height.

like eg:
----------------------------------
Header: 100px
----------------------------------
Middle: auto (filling up space)
----------------------------------
Footer: 50px
----------------------------------

_________________________

That's pretty much what I'm after. I've altered the code thoroughout the day and now the footer seems to work. However there is still a small gap between the content and footer - the content is not auto expanding.

I notice it's fine on small monitors, but on larger monitors there is a gap if there is a bit of content. The other pages seem fine because there is a bit more content.

Just no idea why the middle section is not fully auto expanding.
Mywebsite: http://www.jonpaulwild.co.uk/contact/thanks

It's fine on a 720p res, but on my other screen res of 1680 x 1050 a gap appears between content and footer
 
Last edited:
You must log in or register to reply here.
Back
Top Bottom