ansaurus

Question

Footer isn't sticking to bottom though I have it coded.

Answer 1

+3 A:

Kon 2009-01-04 16:48:00

Doesnt do it either :(

Skunk 2009-01-04 17:03:32

I have used this one as well and it most definitely works tested it on like 20 different major browsers, ranging from IE6 - FF3.

Mark Davidson 2009-01-04 18:31:22

Could you maybe check my code below for mistakes then? Because I honestly tried this, without the desired result.

Skunk 2009-01-05 09:38:26

Answer 2

A:

Change position from "absolute" to "fixed" for #footer.

Bob 2009-01-04 16:49:33

I thought that too - but doesn't he want to have it at the bottom of the content? Or am I misunderstanding what position:Fixed; does? I'm honestly not sure.

Lucas Jones 2009-01-04 16:52:20

If I use Fixed, the footer sticks to the bottom of the browser, and doesn't scroll. That's not a solution, sorry.

Skunk 2009-01-04 17:01:10

Answer 3

A:

    <style type="text/css">
html {
    height: 100%;
    margin: 0;
    padding: 0;
}
body {
    height: 100%;
    margin: 0;
    padding: 0;
}
#wrap {
    margin-left: auto;
    margin-right: auto;
    width: 960px; 
    position: relative; 
}
*#wrap {            /* IE hack */
height:100%;
}
#footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 30px;
    padding: 0;
}
</style>
<div id="wrap">
    <div id="top"></div>
    <div id="content"></div>
    <div id="footer"></div>
</div>

This worked for me.

James Anderson 2009-01-04 16:55:19

This is the same, right? But with the CSS in the html?

Skunk 2009-01-04 17:04:33

Oh, I see what you did, you left a few lines out. Sadly, for me it still doesn't do anything.

Skunk 2009-01-04 17:21:35

Answer 4

+1 A:

Move the padding from the bottom of the body to the bottom of the #wrap. Your footer is always 30px from the bottom of the "page" because of that padding. By putting it on the #wrap you'll prevent the contents of #wrap from going behind your footer.

Prestaul 2009-01-04 16:55:40

That was my first idea as well :) But is gives the exact same problem, sticking to the bottom of the browser in stead of the page.

Skunk 2009-01-04 17:02:59

Answer 5

+3 A:

You did not follow your instructions carefully enough. The key to Matthew's layout

<div id="container">
   <div id="header"></div>
   <div id="body"></div>
   <div id="footer"></div>
</div>

is that container has position:relative while footer has position:absolute. That places one inside another. Notice that container has a space reserved for footer by reserving padding-bottom the size of footer. So, the layout only works when footer height is fixed.

Absolutely positioned with botttom:0 element will put itself at the bottom of closest relatively positioned parent. If none are there, viewport is used instead, and that is what's happening in your layout.

Your footer div is not a child of your wrap div.

buti-oxa 2009-01-04 17:09:50

That's because I have been editing it :$. I'm trying to fix it right now, in that code. I've put it back as I had it, footer inside wrap :)

Skunk 2009-01-04 17:24:02

Answer 6

A:

IMO, the IE star hack causes the problem. Try changing the IE hacks with :

*html #wrap {
    ...
}

andyk 2009-01-04 18:25:33

That's not it either... :(

Skunk 2009-01-04 19:45:44

huh ? I copied all of your css and apply it to Matthew's layout, changed that line, and it all work as expected.

andyk 2009-01-05 02:28:02

With a page that has more content than just the visible? Because the footer sticks to the bottom as long as I have less then 100% fill of content, and floats halfway when I have more content then "one screen full". I've removed the footer for the time being, so the example doesn't work anymore.

Skunk 2009-01-05 08:39:54

hmm.. weird. Works fine for me in FF3. What browser are you using ? It floats halfway when I changed those back to *#wrap.

andyk 2009-01-06 03:12:57

Answer 7

A:

There must be something else to this matter, every method described above all work on different sites, just not on mine.

This is my page source, non-relevant things are stripped (content and stuff):

<body>
<div id="size"> javascript textsize modifier</div>
    <div id="wrap">

    <div id="top"> logoimage

        <div id="menu">
        <div id="menuwrapper">
            <ul id="primary-nav">
            <li> Homelink </li>
            <li class="menuactive menuparent" class="over"> Link 2
                <ul>
                <li> Sublink 1 </li>
                   <!-- etcetera //-->
                </ul>
            </li>
            <li class="menuparent" class="over"> Active Link 3
                <ul>
                    <li> Sublink 1</li>
                    <!-- etcetera //-->
                    </ul>
               </li>
         </ul>
        </div> <!-- end menuwrapper //-->
        </div> <!-- end menu //-->
    </div> <!-- end top //-->
    <div id="content">
        <div id="newssnippet"></div>
        <div id="roundedright"> <!-- rounded corners //-->
            <!-- 6 divs to create rounded corners //-->
        <div id="right">Random main content</div>
            <!-- 7 divs to create rounded corners //-->
        </div> <!-- end rounded corners //-->

        <div id="logo">Another logo</div>

        <div id="roundedleft"> <!-- rounded corners again //-->
            <!-- 6 divs to create rounded corners //-->
        <div id="left">News content</div> 
            <!-- 7 divs to create rounded corners //-->
        </div>  <!-- end rounded corners //-->

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

Clearly, I am following the prescribed layout from the link in the opening post.

Then in the CSS, I have:

html {
    height: 100%;
    margin: 0;
    padding: 0;
} 
body {
    background: #e7e7e7 url(images/cms/background.jpg) repeat-x;
    font-family: Verdana, Arial, sans-serif;
    font-size: .8em;
    height: 100%;
    margin: 0;
    padding: 0;
    padding-bottom: 30px;
}
#wrap {
    margin-left: auto;
    margin-right: auto;
    width: 960px; 
    position: relative; 
    min-height:100%;
}
*html #wrap {     /* IE hack */
    height:100%;
}
#footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 30px;
    background: transparent url(images/cms/footer.png) no-repeat bottom center;
    padding: 0;
}
#footer p {
    margin: 0;
    padding: 0;
    padding-top: .7em;
    text-align: center;
}
#footer a {
    text-decoration: none;
}

That should be every relevant bit...

What am I missing?

For the record: the footer is sticking to the bottom of the oage in the right position if the content is less than 100% high. So, if it doesn't fill the screen.
The footer is somewhere halfway the content if the content is more then 100% of the page, so when I have to scroll to see everyting.

Skunk 2009-01-04 20:10:25

As I said, the absolute element must be a child of the relative one. In your new html, "size" dive should be relative, not "wrap" div. Your "wrap" div does now wrap anything.

buti-oxa 2009-01-04 20:14:29

Sorry, I really don't understand... Footer is now inside Wrap, so it's their Child, right? Size is something else, and closed before Wrap even opens.

Skunk 2009-01-04 20:32:11

My fault, your indents confused me. Your layout actually works now - it positions footer at the bottom of the wrap, not at the bottom of the screen. You see overlap you do not like because you forgot to reserve the space for the footer. I edited my answer to address the issue.

buti-oxa 2009-01-04 22:22:36

But isn't this: padding-bottom: 30px; the space for the footer?

Skunk 2009-01-05 08:44:34

the wrap div is taking up 100% of the available height but then there's another div (#size) which consumes some height as well, i.e. more than 100% total, so your footer is going to be off position - are we missing some CSS?

annakata 2009-01-05 09:07:41

Move padding-bottom from the body element, to the wrap element in your CSS. Credit to @prestaul for getting that one earlier.

mabwi 2009-01-05 12:51:20

Oops. I wanted to delete my own comment, with a link in there, but instead I accidentally removed someone elses... Sorry!

Skunk 2009-01-30 09:39:16

Answer 8

+1 A:

Right, so with the #size inside the 100%, take the padding off the wrap and add the following to the #content

overflow:auto;
padding-bottom:30px;

then your link works for me in FF

annakata 2009-01-05 12:45:12

It doesn't "float" halfway the page anymore... but now it's not at the bottom on shorter pages -.- This is driving me nuts. I'll start all over again tonight. I'll rewrite the CSS. Thanks for the help!

Skunk 2009-01-05 13:11:56

I'm accepting this, as it is closest to what I want :). Thanks!

Skunk 2009-01-30 09:39:50

Answer 9

A:

There is a pretty good technic with demo in this site: http://www.themaninblue.com/experiment/footerStickAlt/

2009-01-06 13:39:43

Answer 10

A:

Did you want a footer that stays at the bottom even if the content doesn't reach that far?

romenov 2009-10-28 16:41:25

Yep, that was the plan. I can't really remember what exactly fixed it, the website was made with a free CMS that sortof restricted me in my coding. The site is up and running though, without further issues :)

Skunk 2009-11-02 09:42:17

ansaurus

tags:

views:

answers:

Footer isn't sticking to bottom though I have it coded.

related questions