The damn footer won't stay at the foot!

[shrap]

Hi there guys,
I am a fairly experienced CSS user however i have been tearing my hair out with this CSS which my CMS throws out.

The site in question is http://www.ncmag.co.uk.On the homepage all seems fine, but when the CMS inserts a larger article the footer seems to take on a life of its own and appears near the mid section of the page.
I have tried everything and have worked out that the footer rests at the bottom of a div called 'page'. However when i set the height of this to be a percentage it does not seem to set up as 100%, and the footer still rises above it.

Footer: (layout.css line 324)

#footer {
background-color:#222222;
bottom:1px;
clear:both;
color:#FFFFFF;
height:400px;
margin:400px 0pt 0pt;
padding:10px;
position:relative;
width:100%;
}

Page: (layout.css line 61)

#page {
height:100%;
margin:0pt;
min-height:100%;
padding:0pt;
}

Any help would be greatly appreciated!

Cheers in advance,
James

P.s. i know, i know it's horrible CSS... it will validate by the time i am done with it... i promise!

[hawkman]

Go to www.pmob.co.uk Look there for css designs that keep the footer at the bottom. It uses a css hack, but it works in all major browsers starting with IE6.

[shrap]

Go to www.pmob.co.uk Look there for css designs that keep the footer at the bottom. It uses a css hack, but it works in all major browsers starting with IE6.

Thanks... but this wasn't really what i was after... that tutorial covers placing the footer as fixed... i want the footer to scroll with the page.

[achtungbaby]

I just answered this type of question in another thread here: http://www.sitepoint.com/forums/showthread.php?t=516899

It has a link to more examples of the solution. Basically you need to do more than set #page to 100%; you need to set HTML and body as well.

[Paul O'B]

that tutorial covers placing the footer as fixed.

No it doesn't! The 3 col examples show the footer at the bottom of the viewport and the bottom of the document. The sticky at the top of the forum also has links to the examples

However its best if you read the faq as the footer technique is detailed there and is the original source for this as it was originally invented by me (long before the other footers articles appeared)

You cannot however (with any of these methods) have a variable height footer because the only way to make room for the footer is by knowing its height in advance. If you are inserting variable content into your footer then you should really be using a standard footer technique.

The footer at the bottom approach is best for a shallow footer that holds a copyright message or small set of links etc. It doesn't really work with dynamic content of unknown height.

You can't do this either:

#page {
height:100%;
margin:0pt;
min-height:100%;
padding:0pt;
}

They cancel each other out and all you get is a fixed height of 100% and no more. Unless you are resetting the element to height:auto somewhere else. However IE7 doesn't like that and the best method for 100% height is this:

html,body{
height:100%;
margin:0;
padding:0;
}
#page {
min-height:100%;
width:100%;
}
* html #page{height:100%}

[shrap]

Hey! Thanks guys for all the help, but i am still struggling! I have altered my CSS accordingly but the footer still is riding up higher than it should. Am i trying to do something too difficult here? I really don't want to resort to tables but will if i must i s'pose. Thanks for all the help so far, any other advice that will get this to work?

James

[Paul O'B]

Hi,

To be frank that page is a mess

You don't seem to have thought about anything logically and you have an unhealthy mix of absolute positioning and static content. That makes it impossible for you to have a footer because you have placed your side column absolutely and you cannot clear an absolute column which means you can't have a footer under both columns when one is absolutely placed.

If the absolute column was a fixed height then you could make allowances but this is not feasible for your articles. You need to float both those columns and regain the flow of the document.

You have positioned your copyright in the footer using relative positioning which results in a great big gap because relative positioning shouldn't be used for structural layout. There is no need to position it at all and you could simple let it follow in the flow and use margins to nudge it into position.

Why is the footer so big?

You have made it 420px high which combined with the height of your header will mean that there is barely room to fit the header and the footer alone in anybodies viewport (let alone add any content) which makes the issue of the footer at the bottom of the window nonsense because no one has a monitor that big.

Then we have the issue of the footer and despite my attempts to give you the correct advice you have completely ignored the advice I gave you and implemented nothing like it should have been

The faq on the footer and 100% height clearly tells you that only one element can hold the 100% height and this must be the first element on the page. The first element on your page is #container and you have not given that the min-height routines as already indicated above. Instead you applied it to an inner nested div that was half way down the page. There is no logic to doing that!

You then haven't implemented the clearfooter div needed to protect the footer and you haven't applied the negative margin to the footer to bring it back into the viewport. In fact you got nothing right at all in this respect

As I said above I don't think you need the footer at the bottom technique anyway and you should just let the footer follow naturally as your pages will all be larger than the initial viewport anyway with the design you have.

This is how the css should have been if you wanted to implement the sticky footer technique.

html,body{
height:100%;
margin:0;
padding:0;
}
#container {
    width: 100%;
  text-align: left; 
  margin: 0 auto;
     min-height: 100%;
}
* html #container{height:100%}

#page {
margin:0;
padding:0;
}


#content {
  padding: 5px 5px 0 5px;
 background: url("/blog/images/topbg.png") repeat-x;
}
#clearfooter{height:420px;clear:both}
#footer {
clear: both; 
width:100%;
position: relative;
height: 400px; 
color:#FFFFFF;
padding: 10px;
background-color:#222222;
margin-top:-420px;
}

#leftcollatest{
position: relative;
background: url("/blog/images/latestbg.png") repeat-y right;
border-left: #999999 dotted 1px;
padding-left:10px;
float:right;
width:275px;
}

#rightcollatest{
float:left;
width:200px;
background: url("/blog/images/latestbg.png") repeat-y right;
}

#copyright{
position:relative;
font-size:8px;
}

Then you would need to move the footer outside of #container and insert the clearfooter at the same time.

                                <p><a href="http://www.ncmag.co.uk/note">Continue reading...</a></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <br/>
    </div>
    <div id="clearfooter"></div>
</div><!-- #container closing div -->
<div id="footer">
    <div id="sidebar">
        <div class="sidebar-node" id="searchnode">
            <h3>Search</h3>
            <div id="search" class="search">
                <form action="http://www.ncmag.co.uk/search" id="sform" method="get" name="sform">
                    <p>
                        <input type="text" id="q" name="q" value="" />
                    </p>
                </form>
            </div>
        </div>
        <div class="sidebar-node" id="archivesnode">
            <h3>Archives</h3>
            <ul>
                <li><a href="http://www.ncmag.co.uk/archive/2007/10"> October 2007</a> (1)</li>
            </ul>
        </div>
    </div>
    <div id="copyright">
        <p>All content on this site is not the view of Huddersfield New College and are the views of individuals. The content on this site is unaffilated with Huddersfield New College and if it causes offence we ask you to leave the site or contact us immediately.
        <p>
        <p>Design Copyright by James Osborn, &#169; 2007 /  Article Copyright is subject to specific authors as referenced</p>
    </div>
    <div id="sidebarftr">
        <h3>Contact Us</h3>
        <img src="http://www.ncmag.co.uk/blog/images/email.png" alt="Email Me:" /> E-mail me now on: editor[at]ncmag.co.uk </div >
</div>
</body>
</html>

You need to plan your layout more carefully and identify where elements should be floated and control the flow of the document. Don't add a 600px height to #content because you don't know how high your content will be at any given time. Let the content dictate the height.

personally I wouldn't bother trying to implement my footer at the bottom method because there seems no point because the footer is too big for this to make any real effect.

Thus is how a footer should look:

http://www.pmob.co.uk/temp/spointfooter.htm

You need to go back to basics and plan your way carefully and understand the methods you are using and what the consequences will be. There is no point in throwing in relatively positioned elements when you don't understand the consequence of doing so. relative elements are only moved visually and not physically as they always occupy their original place in the document even hough they appear to be somewhere else.

Absolute elements are removed from the flow and are not useful for elements of fluid height because they disrupt the flow and it cannot be regained. If you want elements side by side then you would need to float them. If you use absolute positioning then you would need to fore go having a footer under both columns.

Sorry to sound so harsh but you must pay attention