How to Fix the Footer in CSS

Fix the footer in your website's CSS (Cascading Style Sheets) file to correct a problem in the way the footer displays on one or more of your pages. Even a small error in coding CSS can cause the footer or other elements on a Web page to display incorrectly or not at all. Pay close attention to detail when fixing your CSS code to avoid making the problem worse or creating a new one.

Instructions

1. Log in to your Web hosting account. Open your File Manager application and navigate to the "style.css" file or a similarly named file with a ".css" extension. Click on the file and then click the "Edit" button to open the file for editing.

2. Scroll down to the code for the footer. This code typically displays under a divider that looks something like this:

   /***Footer***/

3. Modify the CSS code to fix the mistake in the footer. For example, if the footer border is too wide, change the pixel value, which is set at "4px" in the following sample code, to a smaller value:

   #footer {
   width:660px;
   clear:both;
   margin:0 auto;
   padding-top:15px;
   line-height: 1.6em;
   text-transform:uppercase;
   letter-spacing: .1em;
   text-align: center;
   border-width:4px
   }

4. Save your changes and then preview the Web page containing the footer in a new browser tab or window. The footer should display correctly. If not, make further tweaks to the CSS file as needed.

Tips & Warnings

• CSS alters only the appearance and layout of the footer on your Web page. If you need to change the footer's content – for example, edit a copyright notice or a link to your home page – you'll need to edit the Web page itself or the file containing the footer code, which may be named "footer.php" or "footer.html" file, depending on the configuration of your Web server.

References

• Electric Toolbox: Fixed Footer Example Using HTML and CSS