WordPress.org

Ready to get started?Download WordPress

Forums

Footer not sticking to bottom of page (10 posts)

  1. fuzzyBEARisHere
    Member
    Posted 3 years ago #

    I have been tasked to modify a wordpress theme for a project of mine. They are requesting a footer on the bottom of the page. I have been looking through the tutorials of sticky footers ect, but i just cannot get the thing to stick to the bottom of the page. At the moment the footer is apearing in the middle of the page, underneath my body content. I have tried to match up the div tags, and it seems that it should work, but it is still not working. Could somebody help me solve this please.

    My site is Arts for Life.
    The people i am working for, want to stick to the same theme, so i am having to figure out what the original developers mind set was when coding, It's all so difficult.

  2. fuzzyBEARisHere
    Member
    Posted 3 years ago #

    ok, i see now that it is sticking to the bottom of the screen, but what i want is for it to be at the bottom of the entire page.

  3. Josh Betz
    Member
    Posted 3 years ago #

    Have you changed something? I don't even see a footer at all anymore.

  4. fuzzyBEARisHere
    Member
    Posted 3 years ago #

    sorry, I have been playing about with it, and think i have made the original mess even worse. Now the footer is appearing at the very top of the page :(. I will stop playing with it now. Can you help me please?.

  5. fuzzyBEARisHere
    Member
    Posted 3 years ago #

    [Large code excerpt removed by moderator. Per forum rules, please use the pastebin for all large code excerpts. It works better anyway.]

  6. justtj
    Member
    Posted 3 years ago #

    You have plenty of floating elements in the layout thats why your main content is of height zero and the footer goes to the top of page...

    create a new class clearfix

    .clearfix:after{
    content: "";
    height:0;
    clear:both;
    display:block;
    }

    apply this to all containers which have floating elements...

  7. DigitalSquid
    Member
    Posted 3 years ago #

    You'll need to add zoom: 1; to the above class to make it work for earlier version of IE.

  8. fuzzyBEARisHere
    Member
    Posted 3 years ago #

    Sorry for the stupid reply, but id this what you mean ?

    /* Chunky Footer */
    #chunkyfooter div {
    width: 480px;
    float: left;
    }
    .clearfix:after{
    content: "";
    height:0;
    clear:both;
    display:block;
    zoom: 1;
    }

    if so, the footer is still showing at the top of the page.

  9. fuzzyBEARisHere
    Member
    Posted 3 years ago #

  10. fuzzyBEARisHere
    Member
    Posted 3 years ago #

    still having no joy with this :(

Topic Closed

This topic has been closed to new replies.

About this Topic