Hey everyone – glad to see there is such a cool place like this site to help each other out. Anyway on to business. I am having a big problem with a css footer. I tried to follow the man in blue’s footerStickAlt and couldn’t get it to work right. If you look at my site with 3 different browsers the footer doesn’t stick to the bottom. In IE 5.5 it may stick then in 6.0 there is a slight scrollbar then in firefox the footer doesn’t even extend all the way down to the bottom. Its quite annoying, i am ready to scrap this entire method. Basically I am trying to achieve this layout that i designed w/o tables:
[img]
I have an expanding header (the red bar) which can virtually stetch to fit the user’s screen resolution. On top of that a div holding the “xpeeria” logo and the top of the black bar. Below that the main content and the black bar.
Building this with tables was quite simple until i reached the footer. So i decided to try to build everything in CSS. I am somewhat new to CSS and pulling my hair out right now with this.
Basically I assume I need to create one div as the header, another div as the content that “floats” over the header then I wanted a footer that would stick to the bottom of the page if there wasn’t enough content and span the entire width of the page. Seeing as so far I am unable to achieve this I have come here in search of help.
here is my page dumbed down to attempt to get this right, let me know based on what i am attempting to do if its feesable, or if i’m doing it all wrong. Thanks
[url]http://www.firebirdomain.com/xpeeria/footer.html
You can see the method I am trying to achieve all over the web, here are a few examples – header on top, content, footer on bottom but the footer always stick regardless of content.
[url]http://www.mikrosite.com/portfolio/websites/aeisag.com.html
[url]http://cssmania.com/galleries/2006/10/?p=11
[url]http://www.freewebsfarms.com/blogs