SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    Colonel Jack O'neill Josh_'s Avatar
    Join Date
    Apr 2004
    Location
    NC
    Posts
    689
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Footer isn't on the bottom

    Hi,

    I'm using some code that Paul O'b provided a while ago, except I'm using it differently than I have before. The footer appears around 30px above the bottom of the page.
    Here's the html:
    Code:
    <?php
    require_once 'includes/dbconnect.php';
    ?>
    <!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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    </head>
    
    <body>
    
    <div id="container">
    <div style="background:url(images/logobg.jpg); height:130px;"><img src="images/leftlogo.jpg" style="float:left;" /><img src="images/rightlogo.jpg" style="float:right;" /></div>
      <div style="margin-left:155px; border:1px solid black; width:460px;">
      content here
    
      </div>
    <div id="clearfooter"></div>
    <div id="footer"></div>
    </div> 
    </body>
    </html>
    and css:
    Code:
    /* commented backslash hack  \*/ 
    html, body{height:100%;} 
    /* end hack */
    html,body {margin:0;padding:0}
    
    #container{
    min-height:100%;height:auto; margin-bottom:-30px;
    width:775px; border:0px solid black; margin:auto;
    background:  url(images/pagebg.jpg) repeat-y;
    }
    * html #container{height:100%;}
    body {
    background-color:#e2e2e2;
    }
    #footer {
    width:485px;
    clear:both;
    height:30px;
    background-color: #ccc;
    color: black;
    border-top:1px solid black;
    font-size:10pt;
    text-align:center;
    vertical-align:middle;
    margin-left:145px;
    }
    #clearfooter{clear:both;height:30px;}
    Thanks!

  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,

    The footer goes outside the container:
    Code:
    <div id="container"> 
      <div style="background:url(images/logobg.jpg); height:130px;"><img src="images/leftlogo.jpg" style="float:left;" /><img src="images/rightlogo.jpg" style="float:right;" /></div>
      <div style="margin-left:155px; border:1px solid black; width:460px;"> content 
    	here </div>
      <div id="clearfooter"></div>
    </div>
    <div id="footer"></div>


    Which means you'll have to centre it etc..

    If you want it inside the container then place it absolutely at the bottom and set #container to relative for stacking context.

    Paul

  3. #3
    Colonel Jack O'neill Josh_'s Avatar
    Join Date
    Apr 2004
    Location
    NC
    Posts
    689
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh, OK. Think you could help me with the absolute positioning? I'm not sure how I could make it so it stays at the bottom.

    Thanks

  4. #4
    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)
    Sure:
    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">
    <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%;} 
    /* end hack */
    html,body {margin:0;padding:0}
    #container{
    min-height:100%;height:auto; margin-bottom:-30px;
    width:775px; border:0px solid black; margin:auto;
    background:  url(images/pagebg.jpg) repeat-y;
    position:relative;
    }
    * html #container{height:100%;}
    body {
    background-color:#e2e2e2;
    }
    #footer {
    position:absolute;
    bottom:0;
    left:0;
    width:485px;
    clear:both;
    height:30px;
    background-color: #ccc;
    color: black;
    border-top:1px solid black;
    font-size:10pt;
    text-align:center;
    vertical-align:middle;
    margin-left:145px;
    }
    #clearfooter{clear:both;height:30px;}
    </style>
    </head>
    <body>
    <div id="container"> 
      <div style="background:url(images/logobg.jpg); height:130px;"><img src="images/leftlogo.jpg" style="float:left;" /><img src="images/rightlogo.jpg" style="float:right;" /></div>
      <div style="margin-left:155px; border:1px solid black; width:460px;"> content 
    	here </div>
      <div id="clearfooter"></div>
    <div id="footer"></div>
    </div>
    </body>
    Paul

  5. #5
    Colonel Jack O'neill Josh_'s Avatar
    Join Date
    Apr 2004
    Location
    NC
    Posts
    689
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, works great!


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
  •