Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5

Thread: Footer issues!

  1. #1
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Footer issues!

    Hi, I am having trouble having my footer stick to the bottom of the page. I have googled the issue and attempted several solutions though nothing seems to be working.

    Here is my CSS, if anybody could help it would be greatly appreciated.

    Currently, my footer is floating as it usually does when it's not stuck to the bottom.

    body{
    background-image:url(../Images/bgforsite.png);
    background-repeat:repeat;
    text-align: center;
    font-size:14.4px;
    font-family:"PT Sans Narrow";
    line-height:22px;
    width:100%;
    color:#595959;
    height:100%;
    margin:0;
    padding:0;

    }


    #header1{
    text-align:right;
    height:9px;
    background-image:url(../Images/toptexture.png);
    background-repeat:repeat;
    margin:0 0 2px 0;
    box-shadow: 0 2px 10px rgba(0,0,0,.1);


    }



    #wrapper1{
    width:1000px;
    margin: 0 auto;
    padding: 0;
    text-align:center;
    color:595959;
    min-height: 100%;
    position:relative;


    }

    #wrapper2{
    width:1000px;
    margin: 0 auto;
    padding: 0;
    text-align:center;
    color:595959;
    position:relative;


    }

    .opening{
    width:770px;
    line-height:28px;
    margin: 0 auto;
    padding: 20px 0 0 0;;
    }

    #header{
    width:1000px;
    height:288px;
    margin:0 0 0 auto;
    padding:22px 0 0 0;
    background-image:url(../Images/headerlogo3.png);
    background-repeat:no-repeat;
    background-position:center;


    }

    #nav{
    width:100%;
    height:54px;
    text-align:center;
    border-top: #bcbcbc 1px dashed;
    border-bottom: #bcbcbc 1px dashed;
    margin: 0 auto;
    padding: 0;
    text-align:center;
    }

    #navtop{
    width:1000px;
    text-align:center;
    margin: 0 auto;
    padding: 0;
    text-align:center;
    }

    #nav2{
    width:1000px;
    height:40px;
    padding: 0;
    text-align:center;
    }



    #content{
    width:1000px;
    margin: 0 auto;
    text-align:center;
    color:595959;
    padding:0 0 14px 0;
    }

    .button{
    padding:20px 62px 0 70px;
    text-align:center;
    }



    #divider2 {
    width: 200px;
    height: 1px;
    border-bottom: #bcbcbc 1px dashed;
    margin: 0 auto;
    padding: 18px 0 0 0;;
    text-align:center;
    }

    #divider3 {
    width: 800px;
    height: 1px;
    border-bottom: #bcbcbc 1px dashed;
    margin: 0 auto;
    padding: 18px 0 0 0;;
    text-align:center;
    }

    #divider4{
    width:100%;
    height:1px;
    text-align:center;
    margin: 0 auto;
    padding: 0;
    text-align:center;
    letter-spacing:20px;
    background-repeat:repeat;
    }


    .facebook{
    margin:8px 2px 0 0;

    }

    .twitter{
    padding:8px 2px 0 0;

    }

    .bigbuttonmiddle{
    padding:12px 0 0 0;
    text-align:center;
    }

    .bigbuttonleftright{
    padding:12px 0 0 0;
    text-align:center;
    }

    .abilities{
    float:left;
    padding:30px 0 0 16px;
    }

    .aboutmemore{
    width:586px;
    float:left;
    text-align:left;
    clear:both;
    padding:0 0 0 18px;

    }

    .designlayout{
    float:left;
    clear:both;
    padding:0 0 0 18px;

    }

    .beloweverything{
    float:left;
    clear:both;
    padding:20px 0 0 18px;

    }

    #footer{
    position: relative;
    bottom: 0;
    left: 0;
    width:100%;
    height: 42px;
    clear:both;
    text-align:center;

    }

    #smallfooter{
    width:100%;
    background-image:url(../Images/toptexture.png);
    background-repeat:repeat;
    position:absolute;
    height:9px;



    }

    Also, my footer div tag is outside my wrapper, the problem is with the CSS.

  • #2
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,755
    Thanks
    41
    Thanked 191 Times in 190 Posts
    that's a good deal of CSS my friend ... what you need to do is put the footer outside the wrapper (which you said you did) and then add a negative margin-bottom that is the height of the footer

    I code C hash-tag .Net
    Reference: W3C W3CWiki .Net Lib
    Validate: html CSS
    Debug: Chrome FireFox IE

  • #3
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yeah, sorry about the amount of css. Thanks, i'll give this a try.

  • #4
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,755
    Thanks
    41
    Thanked 191 Times in 190 Posts
    Quote Originally Posted by hardy9298 View Post
    Yeah, sorry about the amount of css. Thanks, i'll give this a try.
    oh it's no prob- i suggest to many (when having issues they cannot limit down) to remove all the extra "fluff" and add it back in later... helps narrow down what is "broken"... best of luck

    I code C hash-tag .Net
    Reference: W3C W3CWiki .Net Lib
    Validate: html CSS
    Debug: Chrome FireFox IE

  • #5
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Sorted it, thank alkins!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •