CSS - Test Your CSS Skills Number 34 : Quiz now ended - solutions in post #45
The last quiz saw us combating an awkward bug in IE to provide a real life solution and in keeping with that idea this quiz is another real life question that was asked recently on the forums.
This quiz is more a straight forward coding task although it does have some complications that will catch you out 
Your task is to create a centred “Fixed footer” using position:fixed that works in IE7 and above. (IE6 doesn’t understand position:fixed so we won’t bother with coding for that although in real life examples you would probably give IE6 alternative code to have just a normal footer (although there are a number of hacks to give it a fixed footer if needed).
Although a fixed footer is relatively easy to do the task is complicated by the fact that there is a “back to top” link on the right side of this fixed footer that needs to remain in view when the screensize is smaller than the container.
If you look at the attachment (fixed.png) you will see a screenshot of a fixed footer that works well at large screen sizes. However when the page is resized smaller than the main container we need to use the horizontal scrollbar to view the content that is hidden off screen.
That works fine for the normal content but the “back to top” link on the fixed footer stays hidden off screen because you can’t actually scroll a fixed element. This is one of the major drawbacks of fixed positioning because content that is outside the viewport is unreachable via scrollbars.
Your task is to make that “back to top link” that is at the right of the fixed footer stay in view as the page is resized smaller and as shown in the screenshot.
I will provide the html for a basic page with a normal footer but you can change the CSS and html for the footer element only. None of the CSS for the rest of the page should be changed as it doesn’t need changing.
You can change the footer html and css as much as you like or use your own but it must work the same as shown in the screenshot and as already described.
The normal content above the footer is a 910px pixel width centred layout and must remain as such.
Here is the basic code for a normal footer so you don’t have to make your own:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
height:100%;
margin:0;
padding:0;
}
#outer {
width:910px;
min-height:100%;
border-left:5px solid #006f48;
border-right:5px solid #006f48;
background:#00ab6f;
padding:0 10px;
margin:auto;
color:#fff;
}
h1, p {
margin:0 0 2em;
line-height:1.3;
}
* html #outer {
height:100%
}
#fixedfoot {
width:930px;
height:45px;
padding:5px 10px 0;
background:#20805e;
margin:0 auto;
border:5px solid #000;
font-size:93%;
color:#fff;
}
a.back {
float:right;
background:#006f48;
padding:5px;
height:60px;
border:2px solid silver;
margin:-25px 20px 0 0;
}
#fixedfoot a {
color:#fff
}
p.last {
margin:0;
}
</style>
</head>
<body>
<div id="outer">
<h1>Fixed footer</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vel varius tortor. Suspendisse massa velit, elementum sit amet tempus sit amet, viverra a leo. Maecenas molestie tempus quam, ut facilisis lectus sodales nec. Quisque augue justo, mollis ac tincidunt id, auctor sed est. Suspendisse potenti. Nulla lacinia ipsum sed leo placerat ut malesuada justo mattis. Donec eu iaculis tellus. Praesent pretium nibh et ligula ultricies accumsan. Nullam ut risus vitae felis imperdiet rutrum ac in turpis. Donec elementum scelerisque erat, eu consectetur tellus tincidunt sed. Integer in sem lacus. Phasellus congue molestie feugiat. Sed aliquam porttitor feugiat. Integer faucibus mi non sapien consectetur congue. Praesent sed dolor purus, eget varius eros. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vel varius tortor. Suspendisse massa velit, elementum sit amet tempus sit amet, viverra a leo. Maecenas molestie tempus quam, ut facilisis lectus sodales nec. Quisque augue justo, mollis ac tincidunt id, auctor sed est. Suspendisse potenti. Nulla lacinia ipsum sed leo placerat ut malesuada justo mattis. Donec eu iaculis tellus. Praesent pretium nibh et ligula ultricies accumsan. Nullam ut risus vitae felis imperdiet rutrum ac in turpis. Donec elementum scelerisque erat, eu consectetur tellus tincidunt sed. Integer in sem lacus. Phasellus congue molestie feugiat. Sed aliquam porttitor feugiat. Integer faucibus mi non sapien consectetur congue. Praesent sed dolor purus, eget varius eros. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vel varius tortor. Suspendisse massa velit, elementum sit amet tempus sit amet, viverra a leo. Maecenas molestie tempus quam, ut facilisis lectus sodales nec. Quisque augue justo, mollis ac tincidunt id, auctor sed est. Suspendisse potenti. Nulla lacinia ipsum sed leo placerat ut malesuada justo mattis. Donec eu iaculis tellus. Praesent pretium nibh et ligula ultricies accumsan. Nullam ut risus vitae felis imperdiet rutrum ac in turpis. Donec elementum scelerisque erat, eu consectetur tellus tincidunt sed. Integer in sem lacus. Phasellus congue molestie feugiat. Sed aliquam porttitor feugiat. Integer faucibus mi non sapien consectetur congue. Praesent sed dolor purus, eget varius eros. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vel varius tortor. Suspendisse massa velit, elementum sit amet tempus sit amet, viverra a leo. Maecenas molestie tempus quam, ut facilisis lectus sodales nec. Quisque augue justo, mollis ac tincidunt id, auctor sed est. Suspendisse potenti. Nulla lacinia ipsum sed leo placerat ut malesuada justo mattis. Donec eu iaculis tellus. Praesent pretium nibh et ligula ultricies accumsan. Nullam ut risus vitae felis imperdiet rutrum ac in turpis. Donec elementum scelerisque erat, eu consectetur tellus tincidunt sed. Integer in sem lacus. Phasellus congue molestie feugiat. Sed aliquam porttitor feugiat. Integer faucibus mi non sapien consectetur congue. Praesent sed dolor purus, eget varius eros. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vel varius tortor. Suspendisse massa velit, elementum sit amet tempus sit amet, viverra a leo. Maecenas molestie tempus quam, ut facilisis lectus sodales nec. Quisque augue justo, mollis ac tincidunt id, auctor sed est. Suspendisse potenti. Nulla lacinia ipsum sed leo placerat ut malesuada justo mattis. Donec eu iaculis tellus. Praesent pretium nibh et ligula ultricies accumsan. Nullam ut risus vitae felis imperdiet rutrum ac in turpis. Donec elementum scelerisque erat, eu consectetur tellus tincidunt sed. Integer in sem lacus. Phasellus congue molestie feugiat. Sed aliquam porttitor feugiat. Integer faucibus mi non sapien consectetur congue. Praesent sed dolor purus, eget varius eros. </p>
<p class="last">end</p>
</div>
<div id="fixedfoot">
<p><a class="back" href="#">Back to top </a> | © 2010 www.pmob.co.uk | <a href="#">Terms and conditions</a> | <a href="#">Sitemap</a> |</p>
</div>
</body>
</html>
So you have basically two tasks here:
-
Make a fixed footer that sits at the bottom of the viewport and matches the centred page above.
-
Ensure that the right placed “back to top” link is visible as the page is resized smaller than the container.
If anything is unclear then just shout and I’ll try to clarify. (I may need to plug loopholes if I have forgotton anything so I apologise in advance.)
Remember this is just for fun and there are no prizes.
Use Valid CSS and html and must work in IE7 and above using the same code (no need for hacks at all).
Don’t post your answers in this thread but PM with the details instead so that all can have a go.
Have fun.
PS. : In case you missed the other tests you can find them all listed here:
