Styling the #footer Container

Styling the #footer Container

The footer can be separated from other content using border-top and margin-top properties.

The footer content also can be right-aligned using the text-align property.

To add space between the border and footer content, padding-top can be used as shown in Listing 20.12. The results can be seen in Figure 20.4.

Listing 20.12. CSS Code for Styling the #footer Container

body
{
    font: 100% georgia, times, serif;
    background: #fff;
    color: #000;
}

h1
{
    border-bottom: 1px solid #999;
    margin-bottom: 1em;
}

#nav
{
    display: none;
}

#footer
{
    border-top: 1px solid #999;
    text-align: right;
    margin-top: 3em;
    padding-top: 1em;
}

Figure 20.4. Screenshot of styled #footer container.