www.webdeveloper.com
Results 1 to 6 of 6

Thread: position a footer div at bottom of page regardless of page height css

Hybrid View

  1. #1
    Join Date
    Jul 2009
    Location
    UK
    Posts
    174

    position a footer div at bottom of page regardless of page height css

    hi

    Im working on a template:

    here. I want to make a footer div position at the bottom of the page, naturally. I dont want fixed positioning, i want the div to scroll with the page.

    Ive tried all sorts:
    HTML Code:
     position:absolute; left:0; bottom:0;
    
    Ive tried wrappers:
    Code:
    #main-wrapper {min-height:100%;}
    html, body, #main-wrapper {height:100%;}
    all the forums seem to regurgitate this information? Any CSS ninjas out there that can help?

    Success is the ablility to go from one failure to another without loss of enthusiasm.
    -- Sir Winston Churchill.

  2. #2
    Join Date
    Jul 2009
    Location
    UK
    Posts
    174
    Quote Originally Posted by 1cookie View Post
    hi

    Im working on a template:

    here. I want to make a footer div position at the bottom of the page, naturally. I dont want fixed positioning, i want the div to scroll with the page.

    Ive tried all sorts:
    HTML Code:
     position:absolute; left:0; bottom:0;
    
    Ive tried wrappers:
    Code:
    #main-wrapper {min-height:100%;}
    html, body, #main-wrapper {height:100%;}
    all the forums seem to regurgitate this information? Any CSS ninjas out there that can help?

    edited the link above!
    Success is the ablility to go from one failure to another without loss of enthusiasm.
    -- Sir Winston Churchill.

  3. #3
    Join Date
    Apr 2011
    Posts
    46
    absolute positioning may be your problem, it stays put and will not move as data is being added.

    Here's a site that has the wrapper resolution you mentioned, i never used them before so idk.
    http://ryanfait.com/resources/footer...ottom-of-page/

    I was going bonkers over divs not ending up where I wanted them too. I too in the beginning started making everything absolute so i could place them where I wanted. This didn't work well. So I watched some utube tut vids and tried some things out myself and am getting a grip on the whole div thing.

    Here are a few tips I took many painstaking hours to figure out:

    1.If your divs are nested (inside another main div) make sure the total px of each div that is nested is equal to or less than the parent div. Include any padding or margin space. I ran into this issue a lot when i tried to insert multiple columns and the inserted column bounced down the page instead of next to the previous column.

    2.If you want to stack 3+ divs side by side float all left, or right; exception is the last div you stack. So if you have 2 divs as columns and want a third float the first two left and the third either left or right. if you have 3 divs as columns and want a fourth column float the first 3 left and 4th one left or right.

    I hope this helps ya.

  4. #4
    Join Date
    Jul 2009
    Location
    UK
    Posts
    174
    Quote Originally Posted by gellegbs View Post
    absolute positioning may be your problem, it stays put and will not move as data is being added.

    Here's a site that has the wrapper resolution you mentioned, i never used them before so idk.
    That appears to have done the trick. Nice workaround with:

    Code:
    margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
    and the empty
    Code:
    <div class="push">
    element.

    thanks for the help.
    Success is the ablility to go from one failure to another without loss of enthusiasm.
    -- Sir Winston Churchill.

  5. #5
    Join Date
    Aug 2014
    Posts
    2
    try this...

    #outer{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    }
    #inner{
    width: 50%;
    height: 50%;
    top:50%;
    margin: 0 auto;
    position: relative;
    backgroundrange;
    }

    More examples...CSS Div Positiong

    Darren

  6. #6
    Join Date
    Aug 2014
    Location
    Sweden
    Posts
    6
    Here's a tutorial that helped me with this issue!
    http://matthewjamestaylor.com/blog/k...om-of-the-page

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles