100% height - footer sticking to the bottom

[naiani]

Guys, I just found this 3-column layout here (http://www.strictlycss.com/examples/three-column-layout-6.asp).
I need to know what is causing the footer to the bottom, making the minimum height always equals to 100%, because I need it for my website.
I already tried to find out what is doing the magic, but couldn't figure it out. I commented and uncommented every single DIV but the footer always stick to the bottom. I tried to use the attributes and values that I could find in the source that I thought that could be related to it (min-height and height to the container, fixed height with negative margin to the footer), but still couldn't do it.
Can anyone help me with this? min-height and height don't seem to work by themselves, but I don't have idea about what could trigger their effect.

-----

EDIT: OK, I managed to make the bottom of the page stick to the bottom of the viewport (with the html, body {height: 99.3%;} part that I had forgotten to put in my code). But now the #footer keeps moving up when the content of the #content column is too small. What to do?

[Spiritvn]

Sry but i don't understand what you really need here? I see their html have been commented clearly




#footer {
width: 760px;
height: 30px; /*** The drawback with this solution is that the height of the footer can't be flexible. If you add so much content to the footer that it extends 30px, you will get a vertical scrollbar and the content will overflow the footer if you don't set overflow to hidden ***/
margin: 0 auto;
margin-top: -30px; /*** By using a negative margin-top we now moves the footer up the same amount as the footer height to avoid vertical scrolling. Remember, if you use borders and padding on your footer you will have to calculate this in your negative margin-top value also. ***/
text-align: center;
background-color: yellow;
}

And if can, plz give me ur site link and write ur needs with that link, i can image it more exactly

[naiani]

Hi!
The address is http://www.cglg-canada.com/testnew/index_imp.html.
Just go to the page Services, or Visiting Canada, for example. Both are small. You'll notice that the page goes all the way to the bottom of the viewport, but the footer goes up, following the size of the tallest column. You can see it very clearly by the "faux columns" background that continues below the #footer, that has a white background color.

Thanks for the help!

[Spiritvn]

- When I use firefox and nothing to say.
- When i use IE 6.0 i see your footer have something expand the bottom below footer. But i can see it doesn't need any technique. Your code:



body {
text-align: center;
overflow: scroll;
overflow-x: auto;
margin-top: 0;
}


This make margin-top to 0 and margin-left,right,bottom to AUTO. So it takes a little space below your footer. Edit it:


body {
text-align: center;
overflow: scroll;
overflow-x: auto;
margin: 0 auto;
}


Tested with IE 6 and worked fine. Hope that you need