WordPress.org

Ready to get started?Download WordPress

Forums

Fix footer to bottom (10 posts)

  1. ataner
    Member
    Posted 4 years ago #

    Hi,

    I am trying to fix the footer to the bottom of each page. Anything I tried by so far has not worked out. I am sure it is something very simple but I do not seem to figure it out. Any idea?
    My site is http://www.szur.org and the css as follows:
    Thank you!

    /* Footer */
    #footer-wrap {margin:0;}
    #footer {width:950px;padding:1.5em 0;margin:0 auto;color:#999;font-family:american typewriter;text-align:left}
    #footer p {color:#C0C0C0}
    #footer h3 {margin:0;padding:0 0 .6em 0; border-bottom:none; color:#C0C0C0}
    #footer .item {margin:0 0 4em 0}
    #footer ul{list-style:none;margin:0 0 1.6em 0;font-size:1em;}
    #footer ul li a,ul.txt li{height:1%;line-height:1.4em;display:block;padding:6px 0 6px 8px;}
    #footer ul li a:hover,ul.txt li:hover{color:#fff;background-position:1px 0.8em;background: #111}
    #footer ul li a span,ul.txt li,h4 a span{color:#696455;}
    #footer ul li.active a{cursor:default;color:white;}
    #footer ul ul{margin:0;list-style:none;}

  2. esmi
    Theme Diva & Forum Moderator
    Posted 4 years ago #

    What's wrong with your footer? A link to a page where it isn't at the bottom of the page might help.

  3. ataner
    Member
    Posted 4 years ago #

    Hi esmi,

    The footer has different placement on several pages.
    Here it is within the div:
    http://www.renataszur.com/contact

    Here it is outside of the div:
    http://www.renataszur.com/portfolio

    I would like to add a fix place to the footer so it would appear outside the div on the bottom left on every single page. Some pages like the one above has not got enough content, hence the footer is in the middle of the page. Is it possible to make the footer drag the div content down to the bottom? I hope it makes sense. Thanks.

  4. esmi
    Theme Diva & Forum Moderator
    Posted 4 years ago #

    Try adding clear:both; to #footer in style.css.

  5. ataner
    Member
    Posted 4 years ago #

    Thanks esmi. Unfortunately it did not work. I added it as follows. Have I done something wrong?

    #footer {width:950px;padding:1.5em 0;margin:0 auto;color:#999;font-family:american typewriter;text-align:left;clear:both}

  6. esmi
    Theme Diva & Forum Moderator
    Posted 4 years ago #

    No- there's nothing wrong with what you have added but the issue may lie far deeper within the design - which would take time to pick apart.

  7. ataner
    Member
    Posted 4 years ago #

    Thanks. Does it have to do something with the CSS or with the theme itself? Is there a way I could actually fix it?

  8. Rev. Voodoo
    Volunteer Moderator
    Posted 4 years ago #

    http://ryanfait.com/sticky-footer/

    see if anything there helps you out....I've seen several people on here get good results

  9. ataner
    Member
    Posted 4 years ago #

    Thanks! It worked. It picked the footer out of the div, however it did not drag the div down on those pages where the div container does not have full content. Is it possible to make the div container automatically adjust to the size of the screen? To have the footer in the middle of the page is pretty annoying. E.g. here: http://www.renataszur.com/portfolio

  10. ataner
    Member
    Posted 4 years ago #

    The stylesheet looks like this now. It might help.

    /* Footer */
    #footer-wrap {min-height: 100%;height: auto !important;height: 100%;margin: 0 auto -5em;}
    #footer {width:950px;padding:0 0 .5em 0;margin:0 auto;color:#999;font-family:american typewriter;text-align:left;clear:both}
    #footer p {color:#C0C0C0}
    #footer h3 {margin:0;padding:0 0 .5em 0; border-bottom:none; color:#C0C0C0}
    #footer .item {margin:0 0 5em 0}
    #footer, .push {height: 5em;}
    #footer ul{list-style:none;margin:0 0 1.6em 0;font-size:2em;}
    #footer ul li a,ul.txt li{height:1%;line-height:1.4em;display:block;padding:6px 0 6px 8px;}
    #footer ul li a:hover,ul.txt li:hover{color:#fff;background-position:1px 0.8em;background: #111}
    #footer ul li a span,ul.txt li,h4 a span{color:#696455;}
    #footer ul li.active a{cursor:default;color:white;}
    #footer ul ul{margin:0;list-style:none;}

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags