Hello, I have been trying to get this div to stay at the bottom with no luck. I have a the following code:
html body
div id=wrapper div=nav /div /div
div id=footer /div
div id=foot /div
/body /html
Well the footer div has its background set to black as well as the html tag so when the screen is bigger or there is not enough content the footer will seem to grow in height when in fact is only showing the html bg color that is behing. Similar to the technique seen here: http://www.robalan.com/
The last div with Id of foot has an image set as background with a height of 8px, well I want the foot to stay at the bottom when the footer moves up. I tried putting position relative to the body or the html tag and setting the foot to absolute with left 0 and bottom 0 but no luck, the div disappear from the viewport. Here's an image of what I'm trying to get:
PD: When I put the complete code the forum does not show the code, so I put it without the signs. Anyhelp would be great, thanks bros.
The above should make sure you're footer is always at the bottom and you can of course alter the height of your footer together with changing the margin-top value (both same value)
But the website you used to show an example probably used a border-top value to create the difference in color in the footer.
Well the footer div has its background set to black as well as the html tag so when the screen is bigger or there is not enough content the footer will seem to grow in height when in fact is only showing the html bg color that is behing. Similar to the technique seen here: http://www.robalan.com/
The last div with Id of foot has an image set as background with a height of 8px, well I want the foot to stay at the bottom when the footer moves up. I tried putting position relative to the body or the html tag and setting the foot to absolute with left 0 and bottom 0 but no luck, the div disappear from the viewport. Here's an image of what I'm trying to get:
PD: When I put the complete code the forum does not show the code, so I put it without the signs.
Anyhelp would be great, thanks bros.
http://www.cssstickyfooter.com/
html:
height: 100%;
content-div:
min-height: 100%;
_height: 100%; /*for ie6*/
footer:
height: 100px;
margin-top: 100px;
Credits to panenko
But the website you used to show an example probably used a border-top value to create the difference in color in the footer.