SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member dazzmondo's Avatar
    Join Date
    Aug 2004
    Location
    UK
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Angry why is my footer at the top!!!!!!

    Hi everyone, this is my first post and i really hope you can help!

    My footer sits at the top of the page and i cant get it to go to the bottom below my other divs.

    Could anyone please help. Any advice would be happily received as it is my first attempt (as you can guess)

    divnavlist is the left index and divmain is the main info. I want the footer to sit under both of these.
    Here is my CSS and a example page.

    body { background-color: #FFFFFF; margin: 0px; padding: 0px; }
    div, p, address {font-family: Verdana, Arial, Helvetica, sans-serif; }

    #divlogo { position: absolute; left: 0px; top: 0px; width: 770px; }

    #divindex { position: absolute; text-align: justify; left: 0px; width: 770px; top: 70px; background-color: #003399; font-size: 12px; }

    #divnavlist { position: absolute; left: 0px; top: 131px; width: 150px; font-size: 14px; text-align: center; border-bottom: 3px solid #FFFFFF; background-color: #6699FF; }

    #divmain { position: absolute; left: 152px; top: 106px; width: 610px; border-left: 1px solid #003399; padding: 10px 10px 30px; }
    #divmain p { font-size: 12px; margin: 18px 8px 10px; padding-right: 15px; line-height: 1.5; text-align: justify; }
    #divmain h1 { color: #003399; margin: 20px 8px 3px; font-size: 24px; border-bottom: 1px dashed #FEC164; padding-bottom: 10px; }
    #divmain h2 { margin-top: 22px; margin-left: 10px; margin-right:12px; font-size: 16px; padding-bottom: 9px; color:#003399 }
    #divmain a { color: #6600CC; text-decoration: none; padding: 0px 3px; }
    #divmain a:hover, #divmain a:active { text-decoration: underline; }

    #divfooter { left: 0px; width: 100%; color: #FFFFFF; background-color: #003399; clear: both; padding-top: 12px; padding-bottom: 12px; font-size: 10px; text-align: center; }
    #divfooter a { color: #FFFFFF; }
    #divfooter a:hover { color: #FFFF00; background-image: none; }
    #divfooter a:active { color: #FFFF00; background-image: none; }

    p.navbutts { font-size: 12px; }
    .navbutts a {
    font-weight: bold;
    text-decoration: none;
    color: #FFFFFF;
    margin-top: 50px;
    background-color: #6699FF;
    padding: 0px 4px 0px;
    border-top: 0px solid #D0D1CD;
    border-right: 0px solid #585B53
    border-bottom: 0px solid #585B53
    border-left: 0px solid #D0D1CD;
    }
    .navbutts a:hover { color: #330066; background-image: none; }
    .navbutts a:active { color: #0099FF; background-image: none; }

    p.navbutts1 { font-size: 12px; }
    .navbutts1 a {
    font-weight: bold;
    text-decoration: none;
    color: #FF0000;
    background-color: #6699FF;
    padding: 0px 4px 0px ;
    border-top: 0px solid #D0DCD;
    border-right: 0px solid #585B53
    border-bottom: 0px solid #585B53
    border-left: 0px solid #D0D1CD;
    }
    .navbutts1 a:hover { color: #330066; background-image: none; }
    .navbutts a:active { color: #330066; background-image: none; }
    p.navbutts1 { font-size: 12px; }

    #divbox { margin-top: 60px; padding: 0px 0px 10px 0px; margin-left: 5px; width: 140px; background-color: #6699FF; }
    #divbox p { color: #003399; font-size: 10px; margin: 12px 0px 0px; }
    #divbox h2 { color: #666666; font-size: 16px; margin: 16px 0px 0px; }

    #table { margin-left: 25px; margin-right: 10px; }
    td { width: 124px; text-align: center; padding: 1px; margin-left: 7px; margin-right: 7px;}
    td a { color:#FFFFFF; font-size: 11px; text-decoration: none; }



    And the page:

    -<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Bordesley Institute - Transformative Learning</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <link href="css/bordesleycssc4.css" rel="stylesheet" type="text/css">
    <link href="css/printcss.css" rel="stylesheet" type="text/css" media="print"/>
    </head>
    <body>
    <div id="divlogo">
    <p><img src="Images/transformativebanner.png">
    </div>
    <div id="divindex">
    <table>
    <td><a href="..\index.htm">Bordesley<br>Home</a></td>
    <td><a href="managementdevelopment.htm">Management<br>Development</a></td>
    <td><a href="healthandsocialcare.htm">Health &<br>Social Care</a></td>
    <td><a href="researchandconsultancy.htm">Research &<br>Consultancy</a></td>
    <td><a href="transformativelearning.htm">Transformative<br>Learning</a></td>
    <td><a href="onlinelearning.htm">Online<br>Learning</a></td>
    </table>
    </div>
    <div id="divmain">
    <h1>Transformative Learning</h1>
    <p>The finding are offering huge potential for increasing individual and organisational performance. We enable you to discover the impact and relevance of these by providing/p>
    </div>
    <div id="divnavlist">
    <p class="navbutts"><a href="transformativelearning.htm" tabindex="1">Transformative Learning</a></p>
    <div id="divbox">
    <p class="navbutts1"><a href="contactus.htm" tabindex="1">Contact Us</a></p>
    </div>
    </div>
    <div id="divfooter">
    <address> Why is this footer at the top!</address>
    </div>
    </body>
    </html>

  2. #2
    Non-Member Egor's Avatar
    Join Date
    Jan 2004
    Location
    Melbourne, Australia
    Posts
    7,305
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Since you have the divnavlist and divmain positioned absolutely they pop out of the document flow and therefore the footer doesnt know they exist.

    I would take out the absolute positioning out of these two and figure out how to position them another way.

    If you have a live link, please post it.


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
  •