If you only had to worry about Firefox and Webkit browsers, what CSS would you use to make the footer in the following HTML stick to the bottom of the page? Note: I don't want to add any of markup to the page.
<html>
<body>
<header>...</header>
<article>...</article>
<aside>...</aside>
<footer>...</footer>
</body>
</html>
Just set the position as fixed and set bottom to 0:
footer
{
position:fixed;
bottom:0;
}
Works a treat in FF, IE7, IE8, etc for me. Here's my actual CSS on one of my sites for a footer (a div with the id footer):
#footer
{
clear:both;
color:#FFF;
background:#666;
bottom:0;
border:solid 1px #333;
height:30px;
width:100%;
min-width:950px;
position:fixed;
z-index:100;
}
Try using position:fixed
You could do something like:
footer { position:fixed; bottom:0; }
It's worth noting that since you're using the <footer> tag, you shouldn't put the # in front of 'footer' in the CSS, as using #footer is referencing an element with an id of 'footer', not the footer element itself