How can I make footer flip to the bottom of the page ?

Le'ts take standart 3 - column design, with header and footer.
Left and right bars have fixed width. Content part has width 100%.

How can I make footer flip to the bottom of the page with minimum amount of scripts and "sub-div" levels ?

Uhhh, what? Flip? Aren't footers by definition, at the bottom?

Sorry, but you're gonna have to clarify before I understand. It sounds like this should be in the CSS forum, no?

www.doxdesk.com/software/js/fixed.html may help you.

If you postion it absolutely to top-left; then re-position it to bottom-left on-event.
That might work for what you need.

top:0px to bottom:0px of an element, either body or division

This recent sitepoint article might also help you:
Exploring the Limits of CSS Layout

I want to make footer behave exactly as it behaves when site is implemented with tables structure.
That means :
- footer always flips to the bottom of the page, but
when page height is reduced less then (for ex:600px) scrooler appears. (so you'll have to scroll down to see footer.)


The acticle "Exploring the Limits of CSS Layout" doesn't answer on this question.

For now I have to write scripts which find offset height of every column (because I donno which one will be the highest) and find the maximum to set position of the footer.

Also I have to write script which will work with onresize event to move footer up\down.

And it all looks not like optimal solution for such issue ;)

Actually the article is what you need, you'll just need to take some of the concepts from in and apply them to what you want to do.

For example, instead of just making all the maxheights of the column equal, do this, but then check if the maxheight + headerheight + footerheight is greater than xClientHeight(). If it isn't, then you want to set the maxheight to the xClientHeight() - headerHeight - footerHeight (which will make the total height the height of the browser window).

Right, but will footer flip at the bottom of the page if page is downloaded in small browser window and then this window be resized to fullscreen ?

Yes it will work as I am doing the same thing as you. I started with the x.js scripts found from the cbe website as described by the sitepoint article, also you do need to read the next chapter of the article for the explanation of how to put the footer at the bottom of the page.

Cheers Leon

check out my go at doing this at
leon.vicnet.net.au/vicxml/index.html