How to make a simple footer in HTML/CSS

[vtrippy]

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.

Visit us at http://www.sourcecodester.com.

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.

Visit us at http://www.sourcecodester.com.

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.

Download