CSS Footer

HTML & CSS
1

Hi,

How do I ensure the footer sits at the bottom of the page below??
Thanks!
http://www.dublincil.org/v2/about-il/philosophy.php

2

CSS isn’t well designed for this, but clever people have bent it to their will. See this FAQ, which will tell you all you need to know:

3

OK. Now the footer sits below everything but not at the bottom…
http://dublincil.org/v2/resources/belfast-cil.php

How do I fix this?
Thanks

4

When you say “at the bottom”, do you mean at the bottom of the wrapper or at the bottom of the page? Either way, I still recommend you read the page I linked to above, as it has some really important tips.

5

Hi,
I want it to sit at the bottom of the page.

I tried the above link code here.

6

Okay, first thing I would do is to remove #footer from #container, like this:


<div id="container">...</div>
<div id="footer">...</div>

You can also leave it in and use absolute positioning for your footer but this is just the way I’m used to do it :slight_smile:

Then, in my stylesheet I would put this:


#container {position:relative;width:887px;min-height:100%;margin:0 auto;...;}
#footer {position:relative;width:887px;height:60px;margin:-60px auto 0;clear:both;...;}
#mainContent {padding-bottom:60px;}

The 100% min-height for the container is needed to push the footer all the way down. Because of this the footer disappears from the viewport and you’ll get a vertical scrollbar. To get the footer back in the viewport you give it a negative topmargin that is the same as the height of the footer, in this case 60px.

Now to make sure the footer doesn’t overlap your content you give a bottom padding to #mainContent to make room for the footer.

Hope this all makes sense…

7

Is it simply that you want to remove the gap from between #footer and the bottom of the viewport, and for the paragraphs within #footer not to spill out?

If so, then remove the fixed height from #footer, and control the spacing of the paragraphs (#footer p) by using margin instead of padding.

8

You don’t seem to have used any of the techniques from the link that Ralph has mentioned twice now. It contains all the methods you need to make this work and is indeed the only cross browser method around . All the other methods fail at some stage and in some browsers.

In your example you have missed the closing div from your container which is why the footer is half way up the page.


            <a class="url fn n" href="http://www.donegalcil.com/"> <span class="given-name">CIL Donegal</span> </a> </div>
    </div>
[B]</div><!-- missing closing div goes here -->[/B]
<!-- end mainContent -->
<div id="footer">

That will move the footer down below the container but it will be below the fold because you have not followed any of the concepts needed to make this work.

A sticky footer uses a number of different techniques and are explained in detail in the link that Ralph gave above. There is also in -depth explanation here although the current best code is as shown[URL=“http://www.pmob.co.uk/temp/sticky-footer-ie8new-no-table.htm”] in this demo.

Here is a demo sized to your page width and using your page colours to show the basics in effect.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Sticky Footer at Bottom</title>
<style type="text/css">
* {/* for demo only*/
    margin:0;
    padding:0
}
html, body {
    height:100%;/* needed to base 100% height on something known*/
    text-align:center;
}
body{
    background:#F2F5FA;
    font-family: Verdana, helvetica, sans-serif;
    color: #365665;
}
#outer {
    width:887px;
    background:#cfe1e9;
    margin:auto;
    min-height:100%;
    margin-top:-70px;/*footer height + wrappper border - this drags the outer  up through the top of the monitor */
    text-align:left;
    border:solid 2px #FFF100;
}
* html #outer {
    height:100%
}
#header {
    background:red;
    border-top:70px solid #fff100;/* soak up negative margin and allows header to start at top of page*/
    height:120px;
    background:#fff;
}
#footer {/* footer now sits at bottom of window*/
    background:#a2c1de;
    width:891px;
    margin:auto;
    height:66px;/* must match negative margin of #outer */
    clear:both;
    overflow:hidden;
}
/*Opera Fix*/
body:before {/* thanks to Maleika (Kohoutec)*/
    content:"";
    height:100%;
    float:left;
    width:0;
    margin-top:-32767px;/* thank you Erik J - negate effect of float*/
}
h1, h2, p {
    padding:0 10px;
}
#outer:after {/* thank you Erik J - instead of using display table for ie8*/
    clear:both;
    display:block;
    height:1%;
    content:" ";
}
</style>
</head>
<body>
<div id="outer">
    <div id="header">
        <h1>Sticky Footer</h1>
    </div>
    <h2>Ultimate Sticky footer that works in ie5/6/7/8, Opera 9 and 10, Firefox 2+, Chrome, Safari 3+ (and probably every other modern browser)</h2>
    <p>test</p>
    <p>test</p>
    <p>test</p>
</div>
<div id="footer">
    <p>Footer</p>
</div>
</body>
</html>

That should show you all you need to know :slight_smile: