I am trying to get my footer correct but am having issues. I was able to keep the footer down at the bottom of the page but then soon realized that when the window is made small, it ends up covering content. I can fix this by taking away position:absolute BUT the footer no longer stays at the bottom of the page if I do this.
I've tried a lot of different things to get this to work, but this is what I am currently looking at, I am hoping someone could lend some advice here..
CSS code:
html, body {
margin: 0;
padding: 0;
height:100%;
}
#wrapper {
width:900px;
background-color:#FAFAFA;
min-height:100%;
margin:0 auto -45px;
height: auto !important;
height:100%;
}
#content{
margin-top:40px;
float: left;
padding-left:100px;
padding-bottom:30px;
overflow:auto;
}
#footer{
height:30px;
bottom:0;
background:#D2CFCF;
width:900px;
clear:both;
position:absolute;
}
I recently tried margin-top:-30px in the footer, and position:relative. With the code above, the footer is nice and seated on the bottom but covers content when the window is made small. What can I do?
The HTML is basically as follows
<body>
<div id="wrapper">
<div id="content">
</div>
<div id="footer">
</div>
</div>
</body>
Use a position: fixed; rule on the footer and a bottom margin on the <body> tag.
BODY {
margin: 0 0 60px 0; /* keep regular content clear of the footer */
}
#footer {
position: fixed;
width: 100%;
height: 50px;
bottom: 0px;
background: #ccc;
overflow: hidden;
}
Note that depending on the window size the footer will cover the content sometimes. But scrolling will reveal any hidden content.