Make child div stay at the bottom of body or html tag.

[Danilux]

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.

[cybershot]

are you talking about a sticky footer? A link would have worked better.

http://www.cssstickyfooter.com/

[Eclipse]

Add the following CSS:

html:
height: 100%;

content-div:
min-height: 100%;
_height: 100%; /*for ie6*/

footer:
height: 100px;
margin-top: 100px;

Credits to panenko

[Eclipse]

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.

[Author]

Posts