Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Mar 2005
    Posts
    48
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Problem with CSS footer

    Hello,

    I have a problem with CSS footer on my page.
    See my base code below. If I set the footercontainer position:relative than it works if the centercontent is big enough. If I set it to absolute than it works if the centercontent is small.
    How can I put the footer always at the end of the page?

    Thanks for your help!

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
    <html>
      <head>
        <title>Test</title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
        <style type="text/css">
    
          #bannercontainer {
            width:901px;
            height:100px;
            background:#fff ;
            border-bottom:1px solid #000;
            border-right:1px solid #aaa;
          }
    
          #maincontainer {
            width:901px;
            background:#fff;
          }
    
          #banner {
            background:#147;
            width:800px;
            height:100px;
            float:left;
          }
    
          #leftcontainer {
            position: absolute;
            left:0;
            top:101;
            width:125;
            background:#eee;
          }
    
          #centercontent {
            background:#fff;
            margin-left: 127px;
            margin-right:127px;
            margin-top:0px;
            padding-left:10px;
            padding-right:10px;
            padding-top:20px;
            width:650px;
          }
    
          #footercontainer {
            position:relative;
            bottom: 0px;
            width:901px;
            height:15px;
            background:#567;
            color: #ddd;
            font-family: Verdana, Arial, Helvetica, sans-serif;
            font-size: 10px;
            text-align: center;
            font-weight: normal;
            padding-top: 5px;
            margin-top:50px;
         }
    
          body {margin:0px 0px 0px 0px; padding:0px; }
         .menu {background-color:#eee; border-right:1px solid #aaa; border-bottom:1px solid #aaa; padding-top:20px; }
         .menu a { width:120px; height:20px; line-height:20px;  background-color:#eee; display:block; color:#000; }
         .stat { width:125px; height:120px;  background-color:#eee; }
         .login { width:125px; height:180px; background-color:#eee; }
    
        </style>
    
      </head>
      <body>
    
    
      <div id="bannercontainer">
        <div id="banner"></div>
      </div>
    
      <div id="maincontainer">
    
        <div id="leftcontainer">
          <div class="menu">
            <a id="top" href="index.php">Home</a>
            <a href="demo.php">demo</a>
            <a href="demo.php">demo</a>
            <a href="demo.php">demo</a>
          </div>
    
          <div class="stat">
            <p>USER:&nbsp;&nbsp; </p>
            <p>USER:&nbsp;&nbsp; </p>
            <p>USER:&nbsp;&nbsp; </p>
          </div>
          <div class="login">login</div>
        </div>
        <div id="centercontent">
          <table>
            <tr><td><br>Generated by PHP<br></td></tr>
            <tr><td><br>Generated by PHP<br></td></tr>
            <tr><td><br>Generated by PHP<br></td></tr>
            <tr><td><br>Generated by PHP<br></td></tr>
          </table>
       </div>
    
         <div id="footercontainer">Demo footer</div>
    
    <?php
    
    ?>

  • #2
    Regular Coder
    Join Date
    Jul 2005
    Location
    Halifax, Nova Scotia, Canada
    Posts
    392
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Don't use absolute positioning for your left and center columns.

    Try something like

    #leftcolumn {
    float: left;
    width: whatever;
    margin: whatever;
    border: whatever;
    }

    #centercolumn {
    float: left;
    width: whatever;
    margin-right: whatever;
    }

    #footer {
    clear: both;
    width: whatever;
    }

    This way the footer element will always be at the bottom of where your content element is regardless of how much content is in it. You may want to float things differently to make it look how you want but this is what I would do.
    Once I thought I was wrong but I was mistaken.


  •  

    Posting Permissions

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