SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Sep 2003
    Location
    Panama
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Footer that won't stay put!

    Help - my footer is attached to the #center!

    Does anyone know the trick for using CSS to get the footer to always sit at the bottom of the page rather than floating up and under any absolutely position elements? It somehow seems attached to the block div "center" even though all <div> are closed and clear: both; appears in the footer script.

    I have tried everything mentioned in the other wise very helpful "HTML Utopia: Designing without Tables Using CSS" book put out by Site Point, but without success.

    Thanks.

    Susan

    Here is the pertinent piece of CSS:

    #left {position: absolute;
    width: 100px;
    top: 100px;
    margin-left:10px;
    background: white;
    border: none;
    padding: 5px;
    float: left;
    }

    #center { width: 80%;
    background: #fff;
    padding: 15px;
    margin-left: 100px;
    }

    #right {position: absolute;
    background: white;
    padding: 5px;
    right: 0px;
    top: 35px;
    width: 140px;
    margin-left: 0px;
    margin-right: 0px;
    border: none;
    float: right; }


    #footer {
    clear: both;
    height: 15px;
    background-color: #006600;
    color: white;
    padding-right: 4px;
    border-top: 1px solid;
    padding-left: 4px;
    font-size: 9px;
    font-color: white;
    padding-bottom: 1px;
    padding-top: 1px;
    border-bottom: 1px solid;
    }

  2. #2
    orange pips! orange pips!
    Join Date
    Oct 2001
    Location
    Its all about location
    Posts
    652
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If your footer is attached to the #center CSS id, then add to it:

    Code:
     
    position: absolute;
    bottom: 0px;
    That will always keep it at the bottom of the page.

  3. #3
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by krayziepjf
    If your footer is attached to the #center CSS id, then add to it:

    Code:
     
    position: absolute;
    bottom: 0px;
    That will always keep it at the bottom of the page.
    Not if you resize your browser window. The only way to do that is to use fixed positioning, which isn't supported by IE/Windows.

  4. #4
    orange pips! orange pips!
    Join Date
    Oct 2001
    Location
    Its all about location
    Posts
    652
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There isn't anyway else to do it that is IE compatible?

  5. #5
    SitePoint Enthusiast irishstu's Avatar
    Join Date
    Aug 2003
    Location
    Dublin Ireland
    Posts
    26
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i spent about 3 hours trying to find a way of doing that before i found this link:

    http://www.positioniseverything.net/ordered-floats.html

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

    If you mean you just want your footer underneath your content and not fixed to the bottom of the page then you wil need to change your layout slightly.

    You have potioned your left and right columns absolutely but you have also added a float to the style. It can't be both! It is either placed absolutely or floated right or left. When you place your lement absolutely it is removed from the flow and therefore following content will ignore it and overwrite it.

    If you float an element then you can get content to avoid the floats by using clear:both (or left and right). You can adust the position of the floats by using the margin property.

    Using your code (with slight changes) a basic 3 column can be produced as follows.
    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>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    #left {
    width: 100px;
    background: yellow;
    padding: 5px; 
    float: left; 
    }
    #center { 
    background: #fff;
    margin-right:150px;
    margin-left: 130px;
    }
    #right {
    background: blue;
    padding: 5px;
    width: 140px;
    float: right; }
    #footer {
    clear: both;
    height: 15px;
    line-height:15px;
    background-color: #006600;
    color: white;
    padding-right: 4px;
    border-top: 1px solid; 
    padding-left: 4px; 
    font-size: 9px; 
    } 
    </style>
    </head>
    <body>
    <div id="left">
      <p>Left</p>
      <p>&nbsp;</p>
    </div>
    <div id="right">
      <p>Rightu</p>
      <p>&nbsp;</p>
    </div>
    <div id="center">
      <p>Centre</p>
    </div>
    <div id="footer">Footer</div>
    </body>
    </html>
    Hope that helps.

    Paul


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
  •