Skip to main content

How to make a simple footer in HTML/CSS

Language


Introduction:
This tutorial will be a code sample of a footer in CSS.

Steps of Creation:
Step 1:

First we need a HTML file to contain our footer. I have created one with a couple of divs and a link to my theme.css CSS file.

  1. <html>
  2. <head> <link rel="stylesheet" type="text/css" href="theme.css"></head>
  3. <body>
  4. <div class='contentFake'></div>
  5. <div class='footer'>
  6. <div class='footerContent'>
  7. Visit us at <a href='http://www.sourcecodester.com'>http://www.sourcecodester.com</a>.
  8. </div>
  9. </div>
  10. </body>
  11. </html>

Step 2:
Now lets set the default settings for our html file in our theme.css.

  1. *{
  2. margin: 0px;
  3. padding: 0px;
  4. color: #fff;
  5. }
  6.  
  7. body{
  8. width: 100%;
  9. }

Step 3:
Next I have set a height for my fake div so it shows up properly...

  1. .contentFake{
  2. background-color: #333;
  3. height: 770px;
  4. }
  5.  
  6. .footer{
  7. width: 100%;
  8. position: fixed;
  9. margin-bottom: 0px;
  10. height: 80px;
  11. background-color: #1A1A1A;
  12. display: block;
  13. }
  14.  
  15. .footerContent{
  16. width: 80%;
  17. margin: auto;
  18. padding: 5px;
  19. text-align: center;
  20. border-left: 1px solid #fff;
  21. border-right: 1px solid #fff;
  22. }

For our footer we have set it fixed to the bottom of the screen with a 80px height, 100% width and a slightly different colour to our main background to differentiate it. I have also given my footerContent a border on the left and right sides and given it a slightly smaller width.

Project Complete!
Below is the full source and download to the files.

  1. <html>
  2. <head> <link rel="stylesheet" type="text/css" href="theme.css"></head>
  3. <body>
  4. <div class='contentFake'></div>
  5. <div class='footer'>
  6. <div class='footerContent'>
  7. Visit us at <a href='http://www.sourcecodester.com'>http://www.sourcecodester.com</a>.
  8. </div>
  9. </div>
  10. </body>
  11. </html>

  1. *{
  2. margin: 0px;
  3. padding: 0px;
  4. color: #fff;
  5. }
  6.  
  7. body{
  8. width: 100%;
  9. }
  10.  
  11. .contentFake{
  12. background-color: #333;
  13. height: 770px;
  14. }
  15.  
  16. .footer{
  17. width: 100%;
  18. position: fixed;
  19. margin-bottom: 0px;
  20. height: 80px;
  21. background-color: #1A1A1A;
  22. display: block;
  23. }
  24.  
  25. .footerContent{
  26. width: 80%;
  27. margin: auto;
  28. padding: 5px;
  29. text-align: center;
  30. border-left: 1px solid #fff;
  31. border-right: 1px solid #fff;
  32. }

Tags

Note: Due to the size or complexity of this submission, the author has submitted it as a .zip file to shorten your download time. After downloading it, you will need a program like Winzip to decompress it.

Virus note: All files are scanned once-a-day by SourceCodester.com for viruses, but new viruses come out every day, so no prevention program can catch 100% of them.

FOR YOUR OWN SAFETY, PLEASE:

1. Re-scan downloaded files using your personal virus checker before using it.
2. NEVER, EVER run compiled files (.exe's, .ocx's, .dll's etc.)--only run source code.

Add new comment

CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.