sticky CSS footer broken
Question by MyBigBigHands_32
My footer is designed to stay at the bottom of the page even if the div above it only has a small amount of content. It worked until recently, and I seem to have broken it somehow.
Can you take a look?
Thanks in advance.
CSS:
body {
margin: 0;
padding: 0;
height: 100%;
font: 100% Helvetica, sans-serif, Arial, sans-serif;
color: #000;
background-color: #FFF;
background-image: url(images/BGmain.png);
background-repeat: repeat-x;
}
/*----------
Div styles
----------*/
#container {
min-height: 100%;
position: relative;
}
.header {
padding: 0 0 230px 0;
text-align: center;
background-image: url(images/BGlogo_55top.png);
background-repeat: no-repeat;
background-position: top;
}
.column1 {
padding-bottom: 50px;
width: 960px;
margin: 0 auto;
position: relative;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 50px;
text-align: center;
}
/*----------
Other
----------*/
.plainimg {
border-style: none
}
/*----------
Text styles
----------*/
p {
font-size: 80%;
color: #333;
line-height: 150%;
text-align: left;
padding: 1px 15px 1px 15px;
}
h1 {
font-size: 100%;
color: #000;
padding: 0;
}
h2 {
font-size: 100%;
font-weight: 500;
color: #000;
padding: 0;
text-align: center;
}
/*----------
Links
----------*/
a.navlink:link, a.navlink:visited {
text-decoration: none;
display: inline-block;
color: #F1F1F1;
width: 120px;
text-align: center;
padding: 0 0 3px 0;
font-size: 80%;
}
a.navlink:hover, a.navlink:active {
text-decoration: none;
display: inline-block;
color: #FFF;
background-color: #000;
width: 120px;
text-align: centre;
padding: 0 0 3px 0;
font-size: 80%;
}
a:link, a:visited {
text-decoration: none;
color: #AEAEAE;
}
a:hover, a:active {
text-decoration: underline;
color: #999
}
The div arrangement is as follows:
<div id=container>
<div class=header></div>
<div class=column1></div>
<div class=footer></div>
</div>
Answer by Brock Adams
As Jason McCreary said, you need to add height to the html CSS.
Use:
html
{
height: 100%;
margin: 0;
padding: 0;
}
On your pages this triggers an extraneous scrollbar for some reason.
UPDATE:
The scrollbar appears to be triggered by the overflow of the .footer h6.
Adding: bottom: 2.5ex; and line-height: 1; to the footer style appears to clears that.
But a better way is to use a CSS reset.
With no reset, at the minimum, add:
.footer h6 {
margin: 0;
padding: 0;
}
.
A CSS reset will also minimize cross-browser variation that busts the layout from platform to platform.
Answer by Starx
Solved. Easy Solution Just put your Footer Division outside of your Container Division.
<div id=container>
<div class=header></div>
<div class=column1></div>
</div>
<div class=footer></div>
