Inspiration: 40 Unique Footer Designs. CSS Tabs and CSS Navigation Menus Showcase (over 70 entries so far) 456 Berea Street: Articles and news on web standards, accessibility, and usability. Sticky Footer. How To Keep The Footer At The Bottom of the Page with CSS. A familiar problem for many developers. A stunning design, perfectly crafted in semantic markup and CSS, that looks perfect in every browser… until you have a page without much content on it. Many people using dummy content on a standard-sized monitor will not notice this issue. Some might even argue that it’s not worth fixing at all… but I think they’re wrong, and just in case you agree, I’m going to show you a simple way to fix it. The Problem: In case you didn’t see the graphic above, or didn’t understand, here it is in a nutshell: When a page contains a large amount of content, the footer is pushed down off the viewport, and if you scroll down, the page ‘ends’ at the footer.
Depending on the design, this can look a little amateur, and it’s especially bad on large screens. I’ve even seen people ‘fix’ it with Javascript, finding out the height of the page and pushing the footer down after page load. 8-O Bad times. The Solution: See The Demo How Is It Done? The HTML The CSS How It Works Done deal. Modern Clean CSS “Sticky Footer” Exploring Footers. One of the nice things about old-school table layout methods is that they enable you to create liquid page designs very easily. If you want to center content vertically or stick a footer to the bottom of the browser window, all you have to do is include one main table with a height of 100% and position elements inside of it. With web standards, you can’t do this anymore. The table height property is deprecated in XHTML, and web standards recommend that you avoid using tables for page layout.
To divide structural markup from presentation, CSS is the way to go — but if you want to use CSS for vertical positioning, you face a lack of support from some mainstream browsers. This article explores the ways you can position footers using web standards, although the same techniques may be used to vertically position other elements. Absolute positioning in a relative box#section1 So how do you position a footer with CSS? <div id="container"><div id="content">... And your style rules look like: Exploring Footers.