How to make a simple footer in HTML/CSS

Submitted by: 
Language: 
Visitors have accessed this post 21164 times.

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='<a href="https://www.sourcecodester.com'>https://www.sourcecodester.com</a>.
  8. " rel="nofollow">https://www.sourcecodester.com'>https://www.sourcecodester.com</a>.
  9. </a> </div>
  10. </div>
  11. </body>
  12. </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='<a href="https://www.sourcecodester.com'>https://www.sourcecodester.com</a>.
  8. " rel="nofollow">https://www.sourcecodester.com'>https://www.sourcecodester.com</a>.
  9. </a> </div>
  10. </div>
  11. </body>
  12. </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. }

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

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • You may insert videos with [video:URL]
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd> <table> <tr> <td> <th> <img> <h1> <h2> <h3> <iframe> [video]
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>, <asp>, <c>, <cpp>, <csharp>, <css>, <html4strict>, <java>, <javascript>, <mysql>, <php>, <python>, <sql>, <vb>, <vbnet>. The supported tag styles are: <foo>, [foo].
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Lines and paragraphs break automatically.
CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.