SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Hybrid View

  1. #1
    SitePoint Addict
    Join Date
    Oct 2006
    Posts
    216
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    footer not staying at bottom for Dynamic Content

    When I create a dynamic content from database and fill up <div id="content-pri">, the footer doesn't go to the bottom of content, rather stays at the bottom of the view port. Any idea how I can fix this?

    PHP Code:
    /* commented backslash hack \*/ 
    htmlbody{height:100%;} 
    /* end hack */
    html,body {margin:0;padding:0}
    body{text-align:center/* centre for ie5.+*/

    #container{
    min-height:100%;
    /*margin-bottom:-50px;*/

    height:auto;
    width100%;
    margin-leftauto;
    margin-rightauto;
    positionrelative;
    text-alignleft;
    background-color#1b000ff
    }
    html #container{
    height:100%;
    width950px/*box model hack for ie5.+*/
    w\idth950px;
    }
    #footer {
    text-alignright;
    width:100%; 
    /*width:950px;*/
    position:absolute;
    bottom:0;
    left:0;
    height:50px;
    background-color#ffa200;
     
    }
    #clearfooter{clear:both;height:50px;width:100%}
    div>{margin:0}
    html>body #minHeight{float:left;width:0px;height:100%;margin-bottom:-52px;} /*safari wrapper */
     
    #content {
                    
    positionrelative/* Needed for Safari */
                    
    marginauto/* Takes care of horizontal alignment in standards compliant browsers */
                    
    text-alignleft;
                    
    width260px;
                    
    height200px;
                    
    background-color#0dff00;
                
    }

    #container-head {
      
    text-alignright;    
      
    background#fdff00;
    }

    #main-nav {
    marginauto;
      
    text-alignright;
      
    padding0 1em;
      
    background-color#ff00fa
    }

    #content-pri {
      
      
    width80%;
      
    floatright;
      
    background-color#d2a5ff
    }

    #content-sec {
      
      
    padding1em 0;
      
    width20%;
      
    floatleft;
      
    background#49e9ff
    }

    #footer .inner {padding: 0px 20px}

    body {
      
    background#dcdcdc;
      
    font-family"lucida grande"tahomaverdanaarialsans-serif;
      
    font-size11px;
      
    margin0px;
      
    padding0px;
      } 
    The html page has this format:
    <div id="container">

    <div id="main-nav"></div>

    <div id="content-sec"></div>

    <div id="content-pri"></div>

    <div id="clear-footer"></div>

    </div>

    <div id="footer">
    <div class="inner"></div>
    </div>

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    HI,

    This is a common problem in IE with dynamic content and it seems to forget to update the absolute positioning correctly. The solution is to use my main footer technique and place it back in the flow after the container but drag it back into view.

    You had the footer html wrong anyway so it wouldn't have worked

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style>
    /* commented backslash hack \*/ 
    html, body{height:100&#37;;} 
    /* end hack */
    html,body {margin:0;padding:0}
    body{text-align:center} /* centre for ie5.+*/
    #container{
    min-height:100%;
    /*margin-bottom:-50px;*/
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    text-align: left;
    background-color: #1b000ff
    }
    
    * html #container{
    height:100%;
    }
    
    #footer {
    text-align: right;
    width:100%; 
    height:50px;
    background-color: #ffa200;
    margin-top:-50px;
    }
    
    #clear-footer{clear:both;height:50px;width:100%}
    p {margin:0 0 1em 0}
    
    #content {
      position: relative; /* Needed for Safari */
        margin: auto; /* Takes care of horizontal alignment in standards compliant browsers */
      text-align: left;
      width: 260px;
      height: 200px;
      background-color: #0dff00;
    }
    
    #container-head {
      text-align: right;    
      background: #fdff00;
    }
    #main-nav {
        margin: auto;
      text-align: right;
      padding: 0 1em;
      background-color: #ff00fa
    }
    
    #content-pri {
      width: 80%;
      float: right;
      background-color: #d2a5ff
    }
    #content-sec {
      padding: 1em 0;
      width: 20%;
      float: left;
      background: #49e9ff
    }
    #footer .inner {padding: 0px 20px}
    body {
      background: #dcdcdc;
      font-family: "lucida grande", tahoma, verdana, arial, sans-serif;
      font-size: 11px;
      margin: 0px;
      padding: 0px;
      }
    </style>
    </head>
    <body>
    <div id="container">
        <div id="main-nav"></div>
        <div id="content-sec"></div>
        <div id="content-pri"></div>
        <div id="clear-footer"></div>
    </div>
    <div id="footer">
        <div class="inner"></div>
    </div>
    </body>
    </html>
    Hope that helps

  3. #3
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Not only that, but given that IE 5/mac is a dead browser, you shouldn't have to worry about supporting it anyway. Just put it in the dumpster along with Netscape 4 and be done with it.

  4. #4
    SitePoint Addict
    Join Date
    Oct 2006
    Posts
    216
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I tried the way Paul suggested. But now, if contents inside content-pri > content-sec, then the footer stay with content-sec. Not at the bottom of the longer content, i.e content-pri.

  5. #5
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Did you include the #clear-footer div?

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I tried the way Paul suggested. But now, if contents inside content-pri > content-sec, then the footer stay with content-sec. Not at the bottom of the longer content, i.e content-pri.
    That's because I copied your html and I've just noticed that you have this:

    Code:
        <div id="clear-footer"></div>
    But the css refers to something else:
    Code:
    #clearfooter{clear:both;height:50px;width:100&#37;}
    If you correct that mistake it will work

    e.g.
    Code:
    #clear-footer{clear:both;height:50px;width:100%}


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
  •