Footer to bottom of page problem

Hi all,

Iv been following this tutorial on how to make my footer remain at the bottom of the page even if there is little content on the page instead of teh footer creeping up, unfortunately im having some trouble achieving the effect.

The tutorial is here http://www.dave-woods.co.uk/index.php/css-fixed-footer/

and my page is here http://www.kylehouston.com/paulsmyth_/tester.html

Can anyone give me some advice to were im going wrong?

Thanks in advance

Kyle

Hi,

You didn’t set html to height:100% and therefore the body has nothing to base it’s height on.

You also need to remove the vertical padding from the wrapper because combined with the 100% it will be too tall.


[B]html{height:100%}[/B]
.wrapper {
    min-height: 100%;
    width: 940px;
    background: #000;
    [B]padding: 0 20px 0;[/B]/* can't have top or bottom padding when specifying the min-height:100%*/
    margin: 0 auto;
}

In your ie6 rules you need to change the wrapper to styles to say this:


.wrapper{height:100%}


You should be aware that the sticky footer method you are using won’t work in IE8 or opera. See the CSS faq for a full working version in IE8 and opera.

Also try to avoid using empty clearing divs when they are unnecessary.

You could have just added clear:both to the main_nav.


<!--contact_hd-->
       [B] <div class="clear"></div>[/B]
        <ul id="main_nav">

Here you could use overflow:hidden on the parent to clear the floats.


        <h1 id="main_logo"><a href="index.php">Paul Smyth Wedding Photography</a></h1>
        [B]<div class="clear"></div>[/B]
    </div>
    <!--//header-->

You would also need haslayout on that element for IE6 to auto clear (and for safety if you are using it as a stacking context for anything):


#header{
width:100%;
overflow:hidden;
}

Here you could have added clear:both to the clearfooter instead.


   [B] <div class="clear"></div>[/B]
    <div id="clearfooter"></div>
</div

Thanks Paul, il have a look at the link now. Thanks for your help!