Tutorial 24: Fixing Frames with Fixed Positioning
|
| ||||
| ||||
|
|
Finishing it all off
Let's get back to our layout and include the header and footer into the picture. The style sheet used to do the positioning is the following:
#navigation { position: fixed; top: 0; left: 0; right: 0; height: 1.4em; border-bottom: 0.2em solid #ACA250; } #intro { position: fixed; top: 1.6em; left: 0; bottom: 1.4em; right: 75%; padding: 0 0.5em; border-right: 0.2em solid #ACA250; } #news { position: fixed; top: 1.6em; left: 25%; bottom: 1.4em; right: 0; padding: 0 0.5em; } #copyright { position: fixed; left: 0; bottom: 0; right: 0; height: 1.2em; border-top: 0.2em solid #ACA250; }
Notice how I've selectively used the height property only on the navigation and copyright elements. These are the only elements that I can't position using just the four offset properties, since we want them to be just tall enough to fit their contents. However, since we won't expect them to get any larger, this does not affect Navigator 4 and Internet Explorer; the height property will still make them large enough to be readable in these browsers.
These declarations will put the sections into the right places, and stop them from scrolling around. This of course means that there's no part of the document left in the main document flow to scroll around anyway. However, what happens when the contents of one of these four elements doesn't fit into the dimensions we've given it? We need the reader to be able to scroll around inside these sections.
