...

View Full Version : CSS footer problem



jlrangi
12-13-2005, 06:11 PM
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

mark87
12-13-2005, 06:21 PM
Er, why is <div style="clear: both;">&nbsp</div> in your CSS?

jlrangi
12-13-2005, 06:40 PM
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
:)

mark87
12-13-2005, 06:42 PM
'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.

jlrangi
12-13-2005, 06:45 PM
What key line Mark ????

mark87
12-13-2005, 06:53 PM
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).

jlrangi
12-13-2005, 07:05 PM
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>

bazz
12-13-2005, 07:47 PM
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

jlrangi
12-13-2005, 09:29 PM
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

_Aerospace_Eng_
12-13-2005, 09:56 PM
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.

jlrangi
12-14-2005, 08:09 PM
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

mark87
12-14-2005, 08:11 PM
This is a great mailing list.

Erm, forum. :D

jlrangi
12-15-2005, 06:32 AM
Oops I meant forum...
:)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum