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 13 of 13
  1. #1
    New to the CF scene
    Join Date
    Dec 2005
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS footer problem

    Hello all,

    I am new to CSS and also to this forum. I am doing a CSS stylesheet for a website. But the problem that I am having is the footer does not stick at the bottom. when there is less text on the page it looks fine. But as you paste more text the footer seems to be at the bottom of the screen but not to the bottom of the page. http://www.bingoconsulting.com

    This is the CSS style steet that I am using:-

    html, body {
    margin: 0;
    padding: 0;
    height: 100%; /* Required */
    }

    #container-page {
    width: 100%
    position: relative;
    min-height: 100%; /* For Modern Browsers */
    height: auto !important; /* For Modern Browsers */
    height: 100%; /* For IE */
    <div style="clear: both;">&nbsp</div>

    }

    #container-content {
    padding-bottom: 25px;
    }
    p {font: 12pt Times, serif}
    #topmargin{
    position: absolute;
    width: 100%;
    top: 0;
    height: 18px;
    background: #000888;
    border-bottom:4px solid #909090;
    }
    #logo{
    position: absolute;
    width: 100%;
    top: 22px;
    height: 60px;
    background: #f5f5f5;
    font-weight: bold;
    color: black;
    font-size: 20pt;

    }

    #homelink{
    position: absolute;
    left:0%;
    width: 16%;
    top: 82px;
    height: 28px;
    background: #B6B6B6;
    border-left:1px solid #909090;
    border-top:4px solid #909090;
    font-size: 12pt;
    font-weight: bold;
    text-align: center;
    }
    #missionlink{
    position: absolute;
    left:16%;
    width: 16%;
    top: 82px;
    height: 28px;
    background: #B6B6B6;
    border-left:1px solid #909090;
    border-top:4px solid #909090;
    font-size: 12pt;
    font-weight: bold;
    text-align: center;
    }
    #aboutuslink{
    position: absolute;
    left:32%;
    width: 16%;
    top: 82px;
    height: 28px;
    background: #B6B6B6;
    border-left:1px solid #909090;
    border-top:4px solid #909090;
    font-size: 12pt;
    font-weight: bold;
    text-align: center;
    }
    #careerlink{
    position: absolute;
    left:48%;
    width: 16%;
    top: 82px;
    height: 28px;
    background: #B6B6B6;
    border-left:1px solid #909090;
    border-top:4px solid #909090;
    font-size: 12pt;
    font-weight: bold;
    text-align: center;
    }
    #serviceslink{
    position: absolute;
    left:64%;
    width: 16%;
    top: 82px;
    height: 28px;
    background: #B6B6B6;
    border-left:1px solid #909090;
    border-top:4px solid #909090;
    font-size: 12pt;
    font-weight: bold;
    text-align: center;
    }
    #contactuslink{
    position: absolute;
    left:80%;
    width: 20%;
    top: 82px;
    height: 28px;
    background: #B6B6B6;
    border-left:1px solid #909090;
    border-top:4px solid #909090;
    font-size: 12pt;
    font-weight: bold;
    text-align: center;
    }

    #sloganimage{
    position: absolute;
    width: 20%;
    top: 110px;
    height: 120px;
    background: #000055;
    border-top:4px solid #909090;
    }
    #slogantext{
    position: absolute;
    left:20%;
    width: 80%;
    top: 110px;
    height: 120px;
    background: #000055;
    border-top:4px solid #909090;
    font-size: 18pt;
    font-weight: bold;
    text-align: center;
    color: #fff;
    vertical-align: top;
    }
    #mainbodyleft{
    position: absolute;
    top: 233px;
    left:0%;
    width: 80%;
    padding: 30
    margin-left: 20px;
    }

    #mainbodyright{
    position: absolute;
    left:80%;
    width: 20%;
    top: 233px;
    border-left:1px dotted #909090;
    padding: 30;

    }
    #footer {
    width: 100%;
    background: #000888;
    position: absolute;
    bottom: 0;
    bottom: -1px; /* For Certain IE widths */
    height: 25px;
    font-size: 18pt;
    font-weight: bold;
    text-align: center;
    color: #fff;
    vertical-align: top;
    }

    I would really appreciate any help on this. I might have also taken wrong approach. Please advise.

    Thanks
    Rangi

  • #2
    Senior Coder
    Join Date
    Dec 2004
    Location
    Essex, UK
    Posts
    2,636
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Er, why is <div style="clear: both;">&nbsp</div> in your CSS?

  • #3
    New to the CF scene
    Join Date
    Dec 2005
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Well I read on one of the forums that if I include <div style="clear: both;">&nbsp</div> in the container page then it will make the footer stick at the bottom of the page......

    Was just giving it a try.

    Do you have any suggestions for me. I can send the php code too if that helps you to understand how I am calling these classes in the php file...

    Thanks

  • #4
    Senior Coder
    Join Date
    Dec 2004
    Location
    Essex, UK
    Posts
    2,636
    Thanks
    0
    Thanked 0 Times in 0 Posts
    'In the container page' is the key line here, it should be in the HTML not the CSS.

    Fix that and then you might find you don't get the footer problems anymore.

  • #5
    New to the CF scene
    Join Date
    Dec 2005
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    What key line Mark ????

  • #6
    Senior Coder
    Join Date
    Dec 2004
    Location
    Essex, UK
    Posts
    2,636
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok I'll explain better, lol...

    <div style="clear: both;">&nbsp</div> should be in your HTML.

    Place it at the bottom of your container DIV (I have no idea if that will work, but that is what the person who told you to do it before meant).

  • #7
    New to the CF scene
    Join Date
    Dec 2005
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for your response Mark.
    I tried that and it didnt work either.

    I am sure I am making more than one mistake.

    This is how I have written my php code to call the css.

    <html>
    <head>

    <title>BingoConsulting LLC.</title>
    <link rel="stylesheet" type="text/css" href="main.css" />

    </head>
    <body>

    <div id="container-page">

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

    <?php include ("header.html"); ?>

    <div id="mainbodyleft">

    <?php include ("mainbody.html"); ?>
    </div>

    <div id="footer">
    <?php include ("footer.html") ?>
    </div>

    <div style="clear: both;">&nbsp</div>

    </div>
    </body>
    </html>

  • #8
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    your footer div is absolutely positioned, which means that it will stay where its told, well, absolutely.

    remove that line in your css and tell it, instead, to :

    clear : both;

    that shoud make it fall below the other divs to be at the bottom of your content. It will however move up and down to suit longer and shorter pages.


    [edit] I would suggest that you move away from positioning absolutely. let it flow so that visitors at other reslutions can see the page nicely. Use % measurements as ofte as posible and for text sizes use em. Makes for a much more accessible page.


    HTH
    Bazz
    Last edited by bazz; 12-13-2005 at 07:50 PM.
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link

  • #9
    New to the CF scene
    Join Date
    Dec 2005
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for responding to my question. I made following modification and still my footer doesnt work.
    Infact if I dont define the position it doesnt show at all.
    #footer {
    width: 100%;
    background: #000888;
    bottom: 0;
    bottom: -1px; /* For Certain IE widths */
    height: 25px;
    font-size: 18pt;
    font-weight: bold;
    text-align: center;
    color: #fff;
    vertical-align: top;
    clear: both;
    }

    If I trick it and in my html call footer after body it does display but still in middle.

    Lalita

  • #10
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    I think you should look at this example.
    http://bonrouge.com/hcf-fluid.php
    Also when you are using includes you don't add in the doctype or the body, all you add is the html that will go in the body. Have you actually tried to view the source of your page after its parsed? You have got problems with it.

  • #11
    New to the CF scene
    Join Date
    Dec 2005
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for your response. I will go ahead and try the link that you have provided.

    Thanks again.
    This is a great mailing list.

    rangi

  • #12
    Senior Coder
    Join Date
    Dec 2004
    Location
    Essex, UK
    Posts
    2,636
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by jlrangi
    This is a great mailing list.
    Erm, forum.

  • #13
    New to the CF scene
    Join Date
    Dec 2005
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Oops I meant forum...


  •  

    Posting Permissions

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