SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2008
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Fixed Positioning at bottom of web page

    Hi people,

    How can I place the footer as a block element at the bottom of the web page in a fixed position?

  2. #2
    SitePoint Enthusiast
    Join Date
    Jan 2008
    Location
    UK
    Posts
    51
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    in your CSS:
    Code:
    #footer{
    	position:absolute;
    	bottom:0px;
    	margin-top:auto;
    }
    In your HTML
    Code:
    <div id="footer">Hello</div>
    That seems to work ok my end (FireFox 3)

    Edit: just found this ( http://ryanfait.com/resources/footer...ottom-of-page/ ) it's a useful link.
    Last edited by Rogem; Mar 1, 2009 at 16:48.
    My Blog/Site: Full On Design

  3. #3
    SitePoint Enthusiast
    Join Date
    Oct 2008
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What I actually meant is that when I scroll the page, the footer should remains fixed at the bottom of the web page. How do I do it?

  4. #4
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code CSS:
    #footer {
      position:fixed;
      bottom:0;
      left:0;
      width:100&#37;;
    }
    This won't work in IE6 and older, since those versions don't support fixed positioning. You'll either need an ugly workaround or use JavaScript for that, but you could also accept that it won't work in those browsers that are more than 8 years old.
    Birnam wood is come to Dunsinane

  5. #5
    SitePoint Enthusiast
    Join Date
    Oct 2008
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AutisticCuckoo View Post
    Code CSS:
    #footer {
      position:fixed;
      bottom:0;
      left:0;
      width:100%;
    }
    This won't work in IE6 and older, since those versions don't support fixed positioning. You'll either need an ugly workaround or use JavaScript for that, but you could also accept that it won't work in those browsers that are more than 8 years old.
    Thank you. It worked for me.


Bookmarks

Posting Permissions

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