Goals

A footer is in the bottom region of a page.

Figure 1. Regions

Footers are often used for:

• Copyright information.
• Menu items that aren’t used much, like a link to a site’s terms of use. That’s the “small print,” telling people what they can and can’t do with the site’s content.

Here’s part of the CoreDogs footer:

Figure 2. CoreDogs footer fragment

Implementation

Here’s the bottom region in a layout:

Figure 3. Footer in a layout

Here’s the code.

...
#bottom_region {
  background-color: #E0E0E0;
}
...
<div id="bottom_region">
  <p>Bottom region</p>
</div>
...

Figure 4. Code for a footer

You can add space with padding and margins:

Figure 5. Footer in a layout with spacing

Change the CSS:

...
#bottom_region {
  background-color: #E0E0E0;
  padding: 5px;
  margin: 0 5px 0 5px;
}
...
<div id="bottom_region">
  <p>Bottom region</p>
</div>
...

Figure 6. Adding space

The horizontal nav bar pattern shows how to create menu for the footer.

Comments

The footer’s font is often smaller than the font for the rest of the page. This makes the footer draw less attention.