HTML and CSS Reference
In-Depth Information
space behind it. Listing 9-7 shows the style rules for the masthead and article, with the latest additions
in bold.
Listing 9-7.
Updating the style rules to create space for a fixed position masthead
#masthead {
background-color: #819cae;
border-bottom: 2px solid #98b8cd;
color: #fff;
padding: 10px 30px;
position: fixed;
width: 830px;
height: 4.25em;
}
article {
background-color: #e6f2f9;
border: 2px solid #98b8cd;
padding: 7.5em 30px 20px;
}
You can see the finished page in Figure 9-23. The article's top padding reserves some space for the
masthead when the page first loads (top). When the viewer scrolls down to continue reading the article,
the masthead stays in place while the content moves up and out of view, partially covered by the fixed
masthead (bottom).
