Footer goes crazy, won't push down

HTML & CSS
1

Hi all,

I have a small problem with my site that I can’t seem to fix. I would like my footer to always stick to the bottom of the screen, unless the content is long enough to push it down. I use a “push” div between the content and the footer parts of my page in order to accomplish that, however in some browsers/resolutions it leaves a gap between the two parts or the footer overlaps a part of the content.

How do I fix this?

This is the CSS (removed irrelevant parts and styles)



*{margin:0;padding:0;} 

html, body {
height: 100%;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
color: #212532; 
}

div#wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -60px;
}

/* top of page */
/* (includes header css) */

/* content part of page */
div#pagebody{
width: 100%;
height: 100%;
padding-top: 75px;
background-image: url(/gui/page_background.jpg);
background-repeat: repeat-x;
}

div#container{
width: 900px;
margin: 0 auto 0;
display: block;
}

div#content{
width: 650px;
float: left;
line-height: 1.8em; 
text-align: justify;
padding-right: 44px;
border-right: 1px solid #dddddd;
margin-bottom: 25px;
}

/* (additional styles and sidebar CSS) */

/* footer */
div#push {
height: 60px;
clear: both;
}

div#footer{
width: 100%;
height: 273px;
background-image: url(/gui/footer_background.jpg);
background-repeat: repeat-x;
display: block;
clear: both;
color: #ffffff;
font-size: 11px;
position: relative;
}

This is the basic HTML (removed template tags and irrelevant content) for my page



<div id="wrapper">

<!-- top of page -->
<div id="top">
<div id="header">
    
    <div id="logo">logo</div>
    <div id="menu">menu</div>

</div>
</div>
<!-- end top of page -->

<!-- content part of page -->
<div id="pagebody">

<div id="container">

     <div id="content">
     page content
     </div>

     <!-- sidebar -->
     <div id="sidebar">
     sidebar
     </div>

     <div id="push"></div>
</div>
</div>


</div> <!-- ends wrapper -->
<!-- end content part -->

<!-- footer part -->
<div id="footer">
footer content
</div>
<!-- end footer part -->

Any ideas? I’m guessing I’m overlooking some detail somewhere, but it keeps looking wrong.

Thanks in advance for any help,
Stef

2

Hi,
here is the basic footer technique applied to a very cut down version of your page.


<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<meta charset="UTF-8" />
<title>Stef Verbeeck | Mensen als Merken</title>
<style type="text/css">
/* Stef Verbeeck CSS */
/* version v 1.0 */
/* august 2010 */
/* created by Stef Verbeeck - Twizted Imagebuilding */
* {
    margin:0;
    padding:0;
}
html, body {
    height: 100&#37;;
    font-size: 12px;
    font-family: Arial, Helvetica, sans-serif;
    color: #212532;
}
#wrapper {
    min-height: 100%;
    margin:-273px auto 0;
    width:100%;
    background: url(http://www.stefverbeeck.be/gui/page_background.jpg) repeat-x 0 329px;
}
* html #wrapper {
    height:100%
}
/*Opera Fix*/
body:before {
    content:"";
    height:100%;
    float:left;
    width:0;
    margin-top:-32767px;
}
#wrapper:after {
    clear:both;
    display:block;
    height:1%;
    content:" ";
}
/* top of page */
div#top {
    width: 100%;
    height: 56px;
    background: url(http://www.stefverbeeck.be/gui/top_background.jpg) repeat-x 0 0;
    border-top:273px solid #000;
}
div#container {
    padding-top: 75px;
    width: 900px;
    margin: 0 auto 0;
    display: block;
    overflow:hidden;
}
#footer {
    width: 100%;
    height: 273px;
    background-image: url(http://www.stefverbeeck.be/gui/footer_background.jpg);
    background-repeat: repeat-x;
    display: block;
    clear: both;
    color: #ffffff;
    font-size: 11px;
    position: relative;
}
</style>
</head>
<body class="home page page-id-27 page-template page-template-homepage-php">
<div id="wrapper">
    <div id="top">
        <h1>header</h1>
    </div>
    <div id="container">
        <p>Page content</p>
    </div>
</div>
<div id="footer">
    <p>footer</p>
</div>
</body>
</html>

You have too many nested divs and are using unnecessary wrappers in a lot of cases so don’t add divs for no reason.

The header rollovers could easily be done in css so you don’t need the DW MM js at all and would save miles of code.

Try to use html semantically and for menus and loads of links uses a list structure. Bare anchors should rarely butt up to each other as that is an accessibility issue and should be separated by a semantic html element ( otherwise screen readers will read them as a sentence an not as separate links).

3

Hi Paul,

Sorry for the late answer, I’ve been out of the office yesterday.

Nevertheless, your suggestion fixed the problem. Site is up and running like it should thanks to your input.

Thanks!
Stef

4

Thanks for the code, that does look a lot less complex. :wink: I implemented your code, and it seems to work fine for resolutions of 1024x768 and up, but on my 13" laptop, the feet of the picture and the bottom half of the boxes on the homepage are cut off in all browsers. It still doesn’t seem to “push” the footer down.

True. I’m just used to the easy way Dreamweaver provides to do this and it is so fast that I generally don’t mind using this built-in function. I should really be less lazy and hand-code it in CSS.

Also a very valid point… Never really looked at it that way.

Yeah, I based my earlier code on an example I found here. I’ve used it several times, and it never caused any problems before. I’ll be sure to use your method from the sticky thread in the future.

5

Yes it does it can’t fail to :slight_smile:

The problem is that you have set your sidebar to 250px height.


div#sidebar {
    width: 160px;
    float: right;
[B]    height: 250px;[/B]
}

Yet inside your sidebar you have placed this:


        <div id="sidebar"> <img src="http://www.stefverbeeck.be/gui/stef_layer.png" width="153" [B]height="568"[/B] /> </div>

The image is over twice the height of the container and therefore any content that sticks out of the container will be ignored in all browsers except ie6 as it always expands an element to accommodate content.

Remove the height from the sidebar and while you are at it remove the height:100% from pagebody because you can;t use height:100% in that way (see faq on 100% height for more info).


div#pagebody {
    width: 100%;
   [B] /*height: 100%;*/[/B]
    padding-top: 75px;
    background-image: url(http://www.stefverbeeck.be/gui/page_background.jpg);
    background-repeat: repeat-x;
}

Hope that helps :slight_smile:

6

Hi,

Firstly the method you are using is unreliable and broken in IE7, IE8 and opera. Refer to the CSS faq (sticky thread) as the sticky footer method is documented fully there and is the only working method to satisy all browsers (and developed in this forum).

Secondly your footer is 272px high but you are only making room for 60px of it to show? Why is this?

The footer height, the negative margin and the height of the push div should match for this to work properly. In my method I don’t need a push div because the space is soaked up by other means.

The issue you are experiencing with different gaps is because good browsers don’t actually need the push div because the clear: both on the footer ensures it doesn’t overlap. IE6 and 7 though do need it.

Use the method in the CSS faq and avoid the issue altogether. (Or just give IE6 and 7 the height in the push div using conditional comments or specific hacks).

If you struggle implementing it then shout and we’ll take another look. You have to fix the height of the footer to match the negative margins etc as I mentioned before.

(I also notice that you have some nested anchors in the footer which is not allowed - or that you have just misplaced a couple of closing tags)