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
  1. #1
    New to the CF scene
    Join Date
    Mar 2013
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    My footer won't go to the bottom of the page

    Any help with this?

    My footer won't go to the bottom of the page:

    bestbluesguitarlessonsonline dot com


    This is my CSS code for the body, wrapper and footer:


    body
    {
    font-size: 100.01%;
    padding: 0px;
    position: relative;
    text-align: center;
    padding:bottom: 60px;
    margin: 0px;
    height: 100%;


    }

    #wrapper
    {
    width:53%;
    position:relative;
    min-height: 100%;
    height: auto !important;
    height: 100%

    }

    #wrapper2
    {
    width:72%;
    float:left;
    position: relative;
    padding-bottom:20px;
    padding-bottom: 50px;


    }
    #wrapper2 .item-page
    {
    width: 100%;


    #footer-outer
    {
    float: left;
    margin:0 auto;
    clear: both;
    height:60px;
    width:900px;
    position: relative;
    bottom: 0px;
    top: max-height;

    }




    #footer-inner
    {
    float:left;
    width:900px;
    margin:0 auto;
    font-size:0.8em;
    padding:10px 15px 15px 10px;


    }


    Hope anyone can help me out.

    Thanks

  • #2
    New Coder
    Join Date
    Sep 2012
    Location
    USA
    Posts
    13
    Thanks
    0
    Thanked 2 Times in 2 Posts
    HI ! I put this example i hope you will get your Solution.

    html,
    body {
    margin:0;
    padding:0;
    height:100%;
    }
    #container {
    min-height:100%;
    position:relative;
    }
    #header {
    background:#ff0;
    padding:10px;
    }
    #body {
    padding:10px;
    padding-bottom:60px; /* Height of the footer */
    }
    #footer {
    position:absolute;
    bottom:0;
    width:100%;
    height:60px; /* Height of the footer */
    background:#6cf;
    }

    And one simple CSS rule for IE 6 and IE 5.5:

    #container {
    height:100%;
    }

  • #3
    Regular Coder Nerevarine's Avatar
    Join Date
    Jan 2013
    Location
    Phendrana Drifts
    Posts
    283
    Thanks
    0
    Thanked 17 Times in 17 Posts
    Blog Entries
    3
    Did you validate both pages?
    Time kills us in our sleep and we watch it happen in our dreams. -K.K.
    THE END-ALL PROGRAMMING REFERENCE: CLICK HERE (Courtesy of Major Payne)
    My username was previously L0adOpt1c. :: Please read this before posting in the HTML/CSS forum.
    Validate your HTML here and your CSS here. :: Need basic HTML/CSS tutorials? Click here, don't post about it.

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,673
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello sreynaert,
    You style #footer-outer from both layout.css and position.css. One entry tells #footer-outer to be floated left but also has top positioning, the other entry has position: absolute; but the bottom positioning is being overridden by your conflicting CSS.

    Look what happens when you comment out some CSS as highlighted in red below -

    layout.css:
    Code:
    #footer-outer
    {
            padding:0;
    		position: absolute;
    		bottom: 0;
    		/*left: 0;
    		right: 0; */
    }
    position.css:
    Code:
    #footer-outer
    {
      height:60px;
      width:900px; 
      /*position: absolute;
      bottom: 0px;
      top: 0px;
      clear: both;
      float: left;
        margin:0 auto; */
    
    
    }
    The push method of building a full height layout has never been my favorite. Look at a better (I think) method here.


    When posting code in the forum, please use the code tags, - available with the # button in the post edit window.
    This will wrap your code in a scroll box which greatly helps the readability of your post.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    Senior Coder jerry62704's Avatar
    Join Date
    Oct 2007
    Location
    Springfield, IL
    Posts
    1,100
    Thanks
    13
    Thanked 87 Times in 87 Posts
    I see a lot of duplication of IDs between several sheets. In addition to the ones above, you also duplicate many things in positions.css and personal.css.
    .
    .
    ...and gladly would he learn and gladly teach

    Visit www.LiberalsWin.com for humor and the unique Bush/Obama Approval Polls


  •  

    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
    •