HTML - Terrible Footer Problem

I am just about to ship this template off to a customer but I am having a problem with my footer. The footer is supposed to expand the width of the page at the very bottom of the page. However, the footer is cramming itself in below the content on the right side panel. However, if I add 2 </div> tags in the HTML code directly above the footer code than it works perfect. The problem is that this invalidates the code and I can't figure out why. The validator claims these </div> tags aren't matched with enough <div> tags. Im going nuts and I know this is a really simple issue. Can anybody see what is going on?!

Here is the page I am talking about:
http://current-post.com/refractive/inner.html

Hi,

I have made a site recently, its fairly dodgy looking but thats what they wanted, it all worked out well except for one of the pages the 'footer' section of the main table wont resize properly, all the pages are coded exactly the same for the section, but just one page wont work the site is www.thesavergroup.com and the page that wont behave is the eftpos page.

Any help would be appreciated i'm going nuts over this.

Thanks

Chris

Hi

Could anyone shed some light on why the footer on this page isn't staying at the bottom of the page? Its ok on the other pages so I'm assuming its got something to do with the contact form on the page.

http://www.buckleigh.co.uk/contact.asp

Here's the css: http://www.buckleigh.co.uk/screen.css

Any help greatly appreciated, thanks.
Kev

So my site works in FF, Safari and IE8 (sorta). However, my sticky footer is getting screwed up in IE7. Im sure it has something to do with margins and padding issues but I can't seem to come up with a solution that works. I based the footer on this article: http://www.lwis.net/journal/2008/02/...sticky-footer/

My template is located at: http://current-post.com

Everything should be w3 valid. Help!

Hi,

I have a problem with a design (http://www.kinoaguilar.com/james/) where if the webpage is not bigger than what the browser can display, then my footer appears in a really 'crappy' way. The easy way to fix it would be to add blank space, but I'd rather not do that. Does anybody know the 'correct' way to fix it?

~lukis100

My fault, the padding pushed the div outward covering the links at the bottom.

....I had enough! My footer is all over the place! Why can't it just move down when the text becomes longer! I am just using <div>. My header, the nav bar and the right side bar are fixed and I want the footer to just fit in underneath. Anybody got some code which solves that problem?

Chris

PHP Code:
<?php
echo "<div class='mainarea'>";
include ("includes/header.inc");

include ("includes/navigation.inc");


if ($var == 'service' or $var == 'consultancy')
{         echo "<div class='textarea_services'><p><br /></p>";
        include ("text.php");
        echo "</div>";        
}
else
{         echo "<div class='textarea'><p><br /></p>";
        include ("text.php");
        echo "</div>";        
}                


if ($var != 'service' and $var != 'consultancy'){include ("includes/rightside.inc");}

if ($var != 'privacy'){include ("includes/footer.inc");}
echo "</div>";
?>

This is the website I'm working on:

http://glacurh.nacurh.org/GLACURH2011/

I cannot, for the life of me, get a footer put below everything with a thin, solid border on it with text aligned in the middle. The footer width, including the border, should be 800x40. The background color should be #FABF8F.

Please help! I don't know what I'm doing wrong!

You all rock!

I couldn't find my footer anywhere on my page, when I copied a footer from another page of mine, it put the footer in the wrong place and I can't get it to go back to being a footer instead of part of the content box.

Please help!

The footer on my webpage stays with the bottom of the window - now when I make the window smaller, the footer moves with the window and then stays there, when I scroll down, the footer stays in the middle of the text. WHAT'S WRONG?

Please have a look:
http://www.stainless-expert.com/new/index.php

Thanks

Chris

Hi, im trying to create a footer that sticks to the bottom of my page and stays there. Please help, im sorta new with this, html/css stuff, I have tried many of the codes that i have searched on google. Any other ways? Please tell me. Thanks

Hello all,

I'm hoping someone can help me with what should be a super simple thing, but I'm not sure if I've just been staring at this code too long or what. Basically all I am trying to do is center my footer on the page, but it seems glued to the left side. I've tried putting in <div align="center" within my HTML, and auto values for my margins in CSS, but neither seem to do the trick. Can anyone help me out? Related markup is below:

<div id="footer" align="center">
<div class="container">
<div class="leftFooter">
<ul class="footerNavMain top">
<li class="first"><a href=" ">Products</a></li>
<li> | </li>
<li><a href=" ">FAQ</a></li>
<li> | </li>
<li class="last"><a href=" ">Where To Find Us</a></li>
</ul>

<ul class="footerNavMain bottom">
<li class="first">Phone Number</li>
<li> | </li>
<li class="last"><a href=" ">Email Link</a></li>
</ul>

<div class="copyright">
^&copy;
2011 Copyright™, All Rights Reserved.
</div><!-- copyright close div -->

</div>
<!-- left footer close div -->
</div><!-- container close div -->
</div>




CSS

#footer {
background: url("/Assets/footer2.jpg") no-repeat scroll 0 0;
display: block;
float: left;
height: 75px;
width: 900px;
margin-left: auto;
margin-right: auto;
}


#footer .container {
height: 75px;
margin-left: auto;
margin-right: auto;
padding-right: 45px;
padding-top: 3px;
width: 900px;
}

#footer .leftFooter {
background: none repeat scroll 0 0;
color: #FFFFFF;
display: block;
float: left;
height: 100%;
margin-left: 5 px;
overflow: hidden;
position: relative;
width: 900px;
}

#footer .rightFooter {
background: none repeat scroll 0 0 #4E4E4E;
color: #FFFFFF;
display: block;
float: right;
height: 100%;
margin-left: 15 px;
position: relative;
width: 355px;
}

#footer .copyright {
display: block;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000;
height: 15px;
left: 0;
line-height: 13px;
position: absolute;
text-align: center;
top: 50px;
width: 900px;
z-index: 1;
font-weight: 700;
}
#footer a:link{
color: #FFFFFF;
text-decoration: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
}

#footer a:visited {
color: #FFFFFF;
text-decoration: none;
font-size: 11px;
}

#footer a:hover{
color: #000000;
text-decoration: underline;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
}

#footer ul.footerNavMain {
display: block;
float: left;
margin-top: 5px;
width: 900px;
font-size: 11px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}

#footer ul.footerNavMain.top {
margin-left: 185px;
width: 900px;
}

#footer ul.footerNavMain.bottom {
margin-left: 145px;
width: 900px;
color: #000000;
}

#footer .footernavMain li {
display: block;
float: left;
padding-left: 4px;
padding-right: 4px;
}


#footernav li a:link {
color: #FFFFFF;
text-decoration: none;
font-size: 11px;
}

#footernav li a:visited {
color: #FFFFFF;
text-decoration: none;
font-size: 11px;
}

#footernav li a:active {
color: #000000;
text-decoration: underline;
font-size: 11px;
}

#header nav li.last, #footerNavMain li.last {
padding right: 0;
}

#footer .footerNavMain li.first {
background: none repeat scroll 0 0 transparent;
padding-left:0;
}

I'm not sure whether this is a CSS problem or Html but I'm gonna post it here any way.

My footer moves up on my photos pages. I put the footer php file in the exact place I put it on the home page. I don't get why it moves up on my photo page though.

Here is the link
http://www.wizardsbuzz.com/photos

Hello, So I posted a while ago that I'm having issues with the footer on a website I'm making for a friend.

Here's a jpg of how it looks now: http://i367.photobucket.com/albums/o...epum/weird.jpg

So I really really need the footer to be RIGHT UNDER the sidebar. I can find all kinds of tutorials online about making the footer "sticky" to the bottom of the page, but nothing about making it start at an exact location.

The sidebar ends at 519px and I want the footer to start at 525px. I've tried putting that into the position property, but in dreamweaver it just shows up crossed out.

Does anyone have any input? I'm getting so frustrated and angry that I can't fix this. It's driving me nuts.

Thank you for any help!!!