www.webdeveloper.com
Results 1 to 5 of 5

Thread: [RESOLVED] Forcing Footers to the Bottom

  1. #1
    Join Date
    Dec 2007
    Location
    Mississippi
    Posts
    1,063

    resolved [RESOLVED] Forcing Footers to the Bottom

    How do you force a footer to stay at the bottom of its container, even though sometimes the container's height is going to extend further than usual at some times?

  2. #2
    Join Date
    Aug 2008
    Location
    NYC
    Posts
    74
    You mean something like this (http://www.cssstickyfooter.com/)?

  3. #3
    Join Date
    Dec 2007
    Location
    Mississippi
    Posts
    1,063
    I tried that, but it didn't work. Any online tutorial I follow doesn't seem to work for me, so it seems to be something specific with how my page is set up. Here's my code. I'm using Firefox 3.5.16. I have all the CSS in style tags rather than an external file merely for testing purposes. Please note that some CSS within the style tags are for pages other than the one I'm testing on right now:

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">
    <head>
    <title>Test</title>
    <meta name="keywords" content=""/>
    <meta name="description" content=""/>
    <!-- ADDITIONAL META INFO -->
    <link href="/rss" rel="alternate" type="application/rss+xml" title="Ultimate Hogwarts News Feed"/>
    <link href="/favicon.ico" rel="shortcut icon"/>
    <style type="text/css">
    /******* FORMAT THE LINK COLOR *******/
    
    a:link { 
       text-decoration: none; 
       color: #0000FF; 
    }
    
    a:visited { 
       text-decoration: none; 
       color: #9900CC; 
    }
    
    a:active { 
       text-decoration: underline; 
       color: #9900CC; 
    }
    
    a:hover { 
       text-decoration: underline; 
       color: #0000FF; 
    }
    
    /******* FORMAT THE BODY OF THE WEB PAGES *******/
    
    html {
       margin: 0px;
       padding: 0px;
       height: 100&#37;;
    }
    
    body {
       background-color: #000000;
       font-family: Tahoma, Georgia, Verdana, Arial, Times, "Times New Roman", monospace;
       font-size: medium;
       color: #FFFFFF;
       margin: 0px;
       padding: 0px;
       height: 100%;
    }
         
    /******* LIST CLASS WITH FORMATTING REMOVED *******/
    
    .nonListList {
       padding: 0px;
       list-style-type: none;
    }
    
    
    
    /******* SET THE FORM LABELS TO BOLD *******/
    
    label { 
       font-weight: bold; 
    }
    
    /****** SET THE COLOR OF WARNING TEXT *******/
    
    .warning {
       color: #FF0000;
    }
    
    /***** TONE DOWN THE HEADINGS *****/
    
    h1, h2, h3, h4, h5, h6 {
       font-size: x-large;
       text-align: center;
    }
    
    /******* GOOGLE STUFF *******/
    
    #headerAd { 
      width: 728px; 
      height: 90px; 
      margin: 0px auto; 
    }
              
    /******* STYLE THE WRAPPER ******/
    
    #wrapper {
      position: relative;
      width: 981px;
      min-height: 100%;
      margin: 0px auto;
    }
             
    /******* THE HEADER, WHICH CONTAINS THE BANNER *******/
    
    #headers {
      width: 981px;
      height: 250px;
      margin: 10px auto;
      background-image: url(/images/banners/header_banner_3.jpg);
      background-repeat: no-repeat; 
    }
    
    #main {
       overflow: auto;
       padding-bottom: 100px;
    }
             
    /******* THE CENTER AREA, WHICH CONTAINS THE MAIN CONTENT *******/
    
    #center {
       width: 570px;
       margin-top: 30px;
       margin-left: 165px;
    }
    
    /******* FEED AND SOCIAL ICONS, INCLUDING RSS, ATOM, FACEBOOK, AND TWITTER *******/
    
    #feedsNsocial { 
       height: 32px;
       width: 300px;
    }
    
    /******* PNG IMAGES CAN'T HAVE THEIR BORDER SET IN CSS DUE TO IE *******/
    
    #feedsNsocial img {
       width: 32px;
       height: 32px;
    }
    
    /******* THE DISCLAIMER *******/
    
    #footer {
       position: relative;
       margin: -100px auto 0px auto;
       height: 100px;
       clear: both;
    }
    
    /***** OPERA FIX *****/
    
    /*body:before {
    	content: "";
    	height: 100%;
    	float: left;
    	width: 0px;
    	margin-top: -32767px;/
    }*/
    
    				
    /******* THE NAVIGATION MENU *******/
    
    #navigation {
      width: 160px;
      position: absolute;
      top: 375px;
      left: 0px;
    }
    
    #leftGoogle {
       width: 120px;
       margin: 0px auto;
    }
    
    .newNav img {
      width: 145px;
      height: 65px;
      border: 0px;
    }
    
    /******* THIS AREA CONTAINS THE RIGHT SIDE OF THE PAGE, INCLUDING THE NEWS SCROLLER, HOUSE POINTs, AND ADS *******/
       
    #right {
      width: 215px;
      position: absolute;
      top: 380px;
      right: 0px;
    }
    
    .rightAds {
       width: 150px;
       margin: 35px auto 0px auto;
    }
    
    #blogAward {
       width: 153px;
       height: 160px;
       padding-left: 25px;
    }
            
    #houses {
       width: 200px;
       height: 150px;
       text-align: center;
    }
            
    #g {
       width: 75px;
       height: 100px;
       background-image: url(/images/misc/gryffindorcopy.jpg);
       float: left;
    }
       
    #h {
       width: 75px;
       height: 100px;
       background-image: url(/images/misc/hufflepuffcopy.jpg);
       float: right;
    }
       
    #r {
       width: 75px;
       height: 100px;
       background-image: url(/images/misc/ravenclawcopy.jpg);
       float: left;
    }
       
    #s {
       width: 75px;
       height: 100px;
       background-image: url(/images/misc/slytherincopy.jpg);
       float: right;
    }
       
    .houseText {
       position: relative;
       top: 72px;
       font-size: 8pt;
       font-weight: bold;
    }
       
    /******* THIS CLASS IS FOR THE BUTTONS USED IN THE NAVIGATION MENUS *******/
    
    img.button3 {
      border: 0px;
      width: 145px;
      height: 65px;
    }
    
    /******* NEWS TICKER *******/
    
    #newsBody {
      width: 200px;
      height: 300px;
      color: #000000;
      font-weight: bold;
      background-image: url(/images/misc/parchment-scroller-background2.jpg);
      background-repeat: no-repeat;
    }
              
    /******* LINK COLORS FOR THE TICKER *******/
    
    #newsBody a:link { text-decoration: none; color: #000066; }
    #newsBody a:visited { text-decoration: none; color: #660066; }
    #newsBody a:active { text-decoration: underline; color: #000066; }
    #newsBody a:hover { text-decoration: underline; color: #660066; }
              
    /******* WHERE THE ACTUAL TEXT APPEARS *******/
      
    #newsWindow {
       width: 100px;
       height: 230px;
       overflow: hidden;
       position: absolute;
       top: 200px;
       left: 50px;
    }
    
    #newsText {
       width: 100px;
       height: 500px;
       position: relative;
       top: 25px;
    } 
              
    #newsHead {
    }
    
    /***** EVERYTHING BELOW STYLES SPECIFIC PAGES *****/
    
    /***** HOMEPAGE *****/
    
    /******* WELCOME MESSAGE ON THE HOMEPAGE *******/
    
    #welcome {
      width: 500px;
      margin: 0px auto;
      text-align: center;
    }
              
    /******* CONTAINS ALL POSTS FROM THE NEWS DATABASE *******/
    
    #news {
      padding: 10px 10px 10px 50px;
      width: 500px;
      text-align: center;
    }
    
    /******* CONTAINS EACH ITEM OF THE NEWS POST, SUCH AS AUTHOR, DATE, ETC. *******/
          
    .news {
      width: 500px;
      text-align: left;
    }
    
    /******* THIS IS FOR THE POST ITSELF *******/
    
    .news_post {
      width: 500px;
      text-align: left;
      margin-top: 20px;
      margin-bottom: 20px;
    }
    
    /******* THE AD THAT APPEARS ON SHOW-NEWS *******/
    
    #post_ad {
       width: 200px;
       height: 90px;
       position: relative;
       right: 140px;
       margin-top: 10px;
    }
    
    /***** END HOMEPAGE *****/
    
    /***** RULES *****/
    
    #rules {
       text-align: center;
    }
    
    /***** END RULES *****/
    
    /***** LINKS-AND-AFFILIATES *****/
    
    /***** links IS THE MAIN CONTAINER *****/
    
    #links {
        margin: 20px auto;
    }
    
    /***** GOLDEN AFFILIATES *****/
    
    #ga {
    	margin: 20px auto;
    	width: 288px;
    	overflow: auto;
    }
    
    #ga img {
       width: 288px;
       height: 36px;
       border: 0px;
    }
    	 
    /***** END GOLDEN AFFILIATES *****/
    
    /***** GENERAL HARRY POTTER *****/
    
    #gHP {
    	margin: 20px auto;
    	width: 284px;
    	overflow: auto;
    }
    
    #gHP img {
       width: 88px;
       height: 31px;
       border: 0px;
       float: left;
    }
    
    /***** END GENERAL HARRY POTTER *****/
    		  
    /***** RPG LINKS *****/
    
    #rpg {
    	margin: 20px auto;
    	width: 264px;
    	overflow: auto;
    }
    
    #rpg img {
       width: 88px;
       height: 31px;
       border: 0px;
       float: left;
    }
    
    /***** END RPG LINKS *****/
    		  
    /***** TEXT LINKS *****/
    
    #texts {
    	margin: 20px auto;
    	text-align: center;
    }
    
    /***** END TEXT LINKS *****/
    
    /***** END LINKS-AND-AFFILIATES *****/
    
    /***** NEWS-CATEGORIES *****/
    
    #categoryWelcome {
       width: 300px;
       padding-left: 25px;
       margin-top: 30px;
    }
    
    #catList {
       margin-top: 30px;
    }
    
    .descClass {
       margin-bottom: 10px;
    }
    
    /***** END NEWS-CATEGORIES *****/
    </style>
    </head>
    <body>
    <div id="wrapper">
    <!-- HEADER AD GOES HERE -->
    <div id="headers"><!-- USED FOR BACKGROUND IMAGE --></div>
    <div id="main">
    <div id="center">
    <div id="welcome">
    <!-- WELCOME MESSAGE -->
    </div>
    <div id="news">
    <!-- NEWS CONTENT -->
    </div>
    </div>
    <!-- LEFT NAVIGATION GOES HERE -->
    <!-- RIGHT SIDE/NEWS SCROLLER GOES HERE -->
    </div>
    </div>
    <div id="footer">Hello world!</div>
    <script type="text/javascript" src="/javascripts/scroll.js"></script>
    </body>
    </html>
    Last edited by Joseph Witchard; 12-30-2010 at 02:24 AM.

  4. #4
    Join Date
    Nov 2010
    Posts
    27
    try bottom:0

  5. #5
    Join Date
    Dec 2007
    Location
    Mississippi
    Posts
    1,063
    I had already tried that dozens of times over with no success. I finally got it to work, but I had to position my content, nav, and right side with float rather than absolute positioning. I had hoped to avoid that, because now my navigation has to come first in the HTML rather than the center content (which is good for SEO), but I finally gave up and declared defeat. I've learned that absolute positioning is a tricky thing to work with.

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