HTML / CSS issues
I have a website that has the following structure:
<div id="page_wrapper"> <div id="header"></div> <div id="content-wrapper"></div> <div id="footer"></div> </div> Now I set html, body and page_wrapper to 100% in CSS. The goal is to get a footer either at the bottom of the content or at the bottom of the window - depending on what is visually lower. I read a lot about how to do this, but I can't get it to work correctly.
html, body, #page_wrapper { height: 100%; } #page_wrapper { width: 864px; margin: 0 auto; min-height: 100%; background: url('path/to/image') repeat-y; } #content-wrapper { position: relative; width: 824px; min-height: 100%; margin: 0 auto; } #footer, #header {width: 824px; margin: 0 auto; } #footer { border-top: 4px solid #000; position: relative; margin-top: -7.5em; } It seems to work. But the problem that I see is that if I zoom out, my page_wrapper seems to almost reset its height to 100%, but as the image zooms in, it gets shorter and shorter and shorter, causing overlap in the footer and text content instead of tapping the footer down.
Any idea how to repair something like that? I am on my way trying to find the answer to this question ...
Updated my answer with the test html, works fine in chrome 13. I tried scaling and shutting down, and the footer remains.
You must place the footer outside the page wrapper. Then give it a negative margin equal to the height of the footer. You can change the height of the title or content wrapper to see the footer at the bottom of the page wrapper instead of the browser window. If you open html, you will see a blue footer sticking to the bottom of the page, and the page wrapper will take up 100% of the window.
Please note that this is fixed without a fix in Firefox 4 and 5. It also does not work in IE 5.5 and earlier.
To make this work properly in IE6, add height: 100%; at #page_wrapper
<html> <head> <style type="text/css"> body, html {height: 100%;margin:0;padding:0;} #page_wrapper {min-height: 100%; background-color: red;} #header{height: 200px; background-color: green;} #content-wrapper{height: 200px; background-color: yellow;} #footer {height: 7.5em;margin-top: -7.5em; background-color: blue; position:relative;} </style> </head> <body> <div id="page_wrapper"> <div id="header"></div> <div id="content-wrapper"></div> </div> <div id="footer"></div> </body> <html> A live example of this can be found at:
https://www.effacts.com/effacts/public?context=107
can find the correct sheet and html:
In #footer css try adding clear: both;
or
add a CSS footer immediately after the position: relative; bottom: 5px;
With position: relative, which you can use, top, right, bottom and left.
If you always want it below, you can put it as below: 5px; If you want it in the lower center, you can put below: 5px; and right or left ...
5px above is just an example where you can change the pixel as much as you want.
In addition, you can also have a clear one: both with it and with this one clear, make sure that there is no other content that would override it.