How to Force a Footer to Stay at the Bottom With CSS

Footers, which appear at the bottom of pages, usually contain links to important sections on a website. CSS has a property named "bottom" that allows site designers to position objects relative to the bottom of a page. By setting this property's value to zero, you can force your footers to stick neatly to the bottom of any Web page.

Instructions

1. Open any HTML document using Notepad or your HTML editor.

2. Add the following div element to the page's body section:

   <div class="bottom">

   This is text inside the footer

   </div>

   This div contains sample footer text and a reference to a CSS class named "bottom."

3. Paste the code shown below into the document's head section:

   .bottom {

   position: absolute;

   text-align: center;

   width: 100%;

   bottom: 0px;

   width: 100%;

   }

   This CSS class -- referenced by the div -- forces the div to float to the bottom of the Web page. The bottom property, set to "0px" in this example, keeps the div at the bottom.

4. Save your document, and view it in your browser to confirm that the footer appears at the bottom of the Web page.

Tips & Warnings

• Place any HTML elements you like, such as links, inside the div. They become part of your footer and move wherever you position the div

• The CSS class definition keeps the footer flush with the bottom of the Web page. If you prefer to move the footer up a bit, change the value of the "bottom" property from "0px" to a different value. For instance, to force the footer to appear 20 pixels above the bottom of the page, set the bottom property's value to "20px."

References

• Quackit: CSS Bottom

Resources

• HTML Goodies: Cascading Style Sheets, Html Goodies CSS Tutorials And Resources