The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums Other Sticky Footer & Various Other Problems

  • This topic is empty.
Viewing 15 posts - 1 through 15 (of 28 total)
  • Author
  • #35858

    I am using a new method of the sticky footer and it seems to work, but it pushes my footer way down there, and my cloud-icon, which is supposed to be 14 pixels below the blog post is hidden between the “Copyright” and “Navigation” footer elements. Can someone please explain to me what I am doing wrong. You can find my website here. And if you are wondering what website I am referring to for the sticky footer method, go here. Thank you for any help you can give me!

    Edit: Also, I noticed ever since I implemented the new sticky footer method it is messing with my shadow boxes. I suspect once I get the sticky footer fixed, this problem will also disappear as well.

    Edit: There are more problems listed at the bottom of this thread!


    Hi mwdewitt!

    It looks like you just have the header and page-wrap div’s switched.

    I also noticed that the conditional comment for IE7, should be “#page-wrap” instead of “#wrap”


    Once the divs are switched, it looks like it works, but I get a vertical scroll bar and I didn’t get a chance to check the css for extra margins/padding.


    You should check this website by the guy who discovered the method, and check your code very carefully, making sure that:

    body & html height = 100%
    footer is not contained in anything/is contained in something without bottom padding/margin
    footer doesn’t have bottom padding or margin (a div in the footer can)
    the divs are in the right order (had that problem a few times)
    You’re clearing any floats


    @Mottie: If I switch the “header” and “page-wrap” divs, it crops my “header-bg” to just 960 pixels. I want the “header-bg” to span the width of the window. So, I can not really do much about that. It also did not seem to fix the fact that the footer is way down there and my “cloud-icon” is still stuck in the footer. But I did change “#wrap” to “#page-wrap” in the conditional comment. Thank you for noticing that.

    : Yeah, that is what I had on my website before I added this new method and it was not working. I tested it on monitors that have a higher resolution than mine and the footer was not sticking to the bottom like it should. This new method that I am using is supposed to prevent having an empty div and also stick the footer permanently to the bottom.

    If anyone has any more suggestions, I would greatly appreciate it. This is basically the last thing I need to do to finish this website. Thank you in advance!


    @mwdewitt What I posted works (demo) – all you’ll need to do is make the page-wrap 100% width, then limit the content width. And I still get a vertical scroll bar.

    I’ve also labeled the major closing divs to keep better track of what is what.


    @Mottie: I am still seeing the same errors in the demo that I saw when I changed the code on my actual website. The “header-bg” is only 960 pixels wide (instead of stretching the entire width of the browser), the footer is still way down there, and my “cloud-icon” is still stuck in the footer. Also, it is messing with my box-shadows that are placed on my blog post and gallery tags. Sorry.

    Again, if anyone knows how to fix this, I would greatly appreciate it!

    Edit: @Mottie: And I just tested your demo in Google Chrome and it seems to have fixed the footer, but the “header-bg” is still not spanning the entire width of the page and my “cloud-icon” is still stuck in the footer. Sigh. Help!


    *sigh* Ok, my last explanation was overlooked/ignored… here is a demo with a new div named “header-inside” that is set to 960px: demo. Please note the extra CSS I added:

    #default #page-wrap { width: 100%; }
    #default #header-inside { width: 960px; margin: 0 auto; }

    I also moved the cloud icon to below the “post-1” closing div. And I added “next” and “prev” inside the navigation since I didn’t see any images associated with them.


    @Mottie: I did not overlook it nor did I ignore it. I never ignore people’s advice on here. The “demo” that you posted in your previous post was still glitchy, the “demo” in your new post works perfectly. Can you check my website to see if everything is working properly? I have a very small monitor with low resolution, so I can not tell if the footer is actually sticking to the bottom or not. Thank you for all of your help! I would not have been able to do it without you!


    No problem, I’m glad it’s … sorta working. This is what I see, for some reason the footer isn’t sticking to the bottom any more:


    Also, if you go on the other pages, they are crashing as well…the “header-bg” is doing what it was doing in your first “demo,” where it does not spread the width of the page and so on. Sadly, I can not just copy your code and paste it into WordPress, because WordPress is modular and the header, main index, sidebar, et cetera are all in different PHP files.


    Hmm, yeah like I said you need to switch the header and pagewrap… I’m not very good with WordPress, but I think all you’ll need to do is edit one file to change the format. Maybe someone like @TheDoc might know.


    Okay, here is a list of things that are currently going wrong with my website:

    • Even though there is a sticky footer implemented, the footer is still not sticking to the bottom.
    • If you go on any other page other than home, my “header-bg” is cropped to 960 pixels and not spanning the width of the page.
    • On my “Contact” page, there is a horizontal scroll bar where there should be none.
    • On my “Store” and “Donations” page, the footer covers up everything because, again, it is not sticking to the bottom.
    • Before I implemented the “new” sticky footer method, my box-shadows were working fine, but now they only appear on the top and bottom of selected item.
    • And I am sure there is more…

    Please help!

    Edit: Why do I have this feeling that I just need to switch around a couple of things and add a little bit of CSS to make everything work?

    Edit: Okay, so the sticky footer is working on the “Home” page, but only the “Home” page. The header is working on the “Home” page, but only the “Home” page. What I can not figure out is why it is not working on the other pages. It is the same damn code repeated on every page! And my shadow-boxes are still having issues, but like I said in my other “Edit,” I believe once I fix all the problems, everything else will fix itself, because the shadow-boxes were working yesterday.


    I’m called to action!

    – they aren’t exactly the same. For example, the ‘Feel Good Candy’ page has a

    before the opening main-col div.

    The ‘Feel Good Candy’ page has 50 opening divs, but only 47 closing divs – that means you have three divs that aren’t closed. This is 99% sure where your problem is.


    Also, you should not be using all of those page-break divs. You should be able to easily accomplish that look through CSS (by adding a margin-bottom to your paragraphs).


    Thank you so much! How do I go about finding out which divs are not closed? I am looking at it in Firebug and everything seems fine. What are you using to look at my code?

Viewing 15 posts - 1 through 15 (of 28 total)
  • The forum ‘Other’ is closed to new topics and replies.