I have this website.
I have set a footer with position fixed with a certain height and width of 100% and left:0px and bottom:0px.
The content above the footer gets blocked behind the footer when I resize the browser even though I have overflow:auto on div element above it.
Here is the screen shot when the browser is resized and the content is blocked.
You can fix this by giving your wrapper a bottom margin that is equal to to the height+padding of your footer, so in this case:
#wrapper {
margin-bottom: 213px;
overflow: auto;
}
The explanation is that when you position something using position:fixed, you remove it from the flow of the document in the same way as with position:absolute (the difference being that fixed will pin your content to the viewport rather than the document and so will not scroll). That means that normally positioned content is not affected by it, and acts as if it is not there.
In your case, your wrapper div was using all of the available space, which included space that was behind your footer. By adding a margin to the bottom of the wrapper, you are effectively stopping it at the start of the footer, and if more space is required a scrollbar will be displayed.
You probably want something like this:
<body>
<div id="page">
<div id="logo">...</div>
<div id="head">...</div>
<div id="wrapper">...</div>
<div id="footerSpacer"></div>
<div id="footer">...</div>
</div>
</body>
And then the CSS file:
html, body {
height: 100%;
}
page {
min-height: 100%;
position: relative;
}
footerSpacer {
height: 200px;
}
footer {
position: absolute;
bottom: 0;
height: 200px;
}
That way the footer is in the normal page flow place if the page is long. If however the page is shorter than the window height, it'll stay at the bottom of the window.
Do you need to have the footer position:fixed; if it's just going straight to the bottom anyways? Why not just do position:absolute;? Either that, or lower the z-index of the footer so it goes behind the content.
position: absolute; would've worked perfectly fine.could you not put a div inbetween the body div and the footer and then add a class to it of clear:both;
The image is getting docked because it has position: fixed, which glues it to that spot on the window, not that spot in the overall flow of the page. It's the same technique that people use to make those nav headers and footers that don't scroll with the page.
For what you want to do, you should float the content of your page and apply clear: both to the css of your footer, which will cause it to clear both right and left floated elements and force it to the bottom. Positioning with fixed or absolute will allow other elements to be hidden behind the footer.
Another approach would to use position: absolute instead of position: fixed to glue the footer to the bottom of the page, then wrap the main content in a <div> and give that a bottom margin equal to the height of the footer.
On another note, it is considered best practice to use lowercase characters when declaring html tags and adding attributes; I noticed you had quite a few in all uppercase. It is also usually a good idea to offload your css and javascript to external files, then import them with <link rel="stylesheet" type="text/css" src="path_to_css_file_from_html_file_location"> and <script src="path_to_javascript_file_from_html_file_location" >, respectively.
