Triuble with a CSS footer

I have some CSS code to put a footer on the bottom of the page that im currently working on, but the problem is that when i resize the screen the footer always remains at the foot of the viewable screen and covers some of the contents which im working on.

The code which i have been using is as follows

Code: Select all

#footer {  clear:both;
    font-size: 12pt;
    text-align: center;
    float: center;
    width: 100%;
    border-style: solid;
    font-weight: bold;
    background-color: #445669;
    color: #FFFFFF;
    position: absolute;
    left: 1%;
    bottom: 0;
    clear: both }

im pretty new at this so any help would be greatly appreciated

Thanks guys
Dave

There is no float: center
And:

Code: Select all

position: absolute;
    left: 1%;
    bottom: 0;

will have the block postioned at the bottom of the window not the document.
If you want it at the bottom of the document you will have to do it diffrently

Also there is no reason that I can see, why you would have clear: both; at the beggining and the end of your class.

Try this:
#footer {
clear: both;
font-size: 12pt;
text-align: center;
width: 100%;
border-style: solid;
font-weight: bold;
background-color: #445669;
color: #fff;
position: relative;
left: 0;
bottom: 0;
}