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 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Aug 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    css sticky footer margin help?

    i am trying to modify a sticky footer (http://www.cssstickyfooter.com/) to show a margin... it is easy for right and left with width:90% and margin:auto

    Code:
    | |    | |
    | |    | |
    | |    | |
    | |    | |
    but how to get the height to 90% (or show some kind of top & bottom margin) without messing up the floating footer

    Code:
    |  ____  |
    | |    | |
    | |____| |
    |        |
    thanks

    http://jsfiddle.net/56REF/

    Code:
    body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,
    textarea,p,blockquote,th,td { 
        margin:0;
        padding:0;
    }
    #header {
        height: 33px;
        line-height: 33px;
        text-align: center;
        background-color: green;
    }
    html { height: 100%; }
    body { height: 100%; width: 90%; margin: auto; }
    #wrap { min-height: 100%; background-color:gray; }
    #main {
        overflow: auto;
        padding-bottom: 33px; /* must be same height as the footer */
        background-color: red;
        height: 100%;
    }
    #footer {
        position: relative;
        margin-top: -33px; /* negative value of footer height */
        height: 33px;
        line-height: 33px;
        text-align: center;
        background-color:blue;
    }
    ​

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Like
    Code:
    body { height: 100%;  }
    #wrap { min-height: 100%; background-color:gray; width: 90%; margin: 10% auto; }
    #footer {
        position: relative;
        margin-top: -33px; /* negative value of footer height */
        height: 33px;
        line-height: 33px;
        text-align: center;
        background-color:blue;
    width: 90%; margin: auto;
    	}
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New to the CF scene
    Join Date
    Aug 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thanks anyway but that doesn't seem to work

    http://jsfiddle.net/56REF/35/

  • #4
    New to the CF scene
    Join Date
    Aug 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts


  •  

    Tags for this Thread

    Posting Permissions

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