Tutorial 24: Fixing Frames with Fixed Positioning - HTML with Style | 7

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.

Next Page...

https://www.internet.com/

URL: https://www.webreference.com/html/tutorial24/6.html

Produced by Stephanos Piperoglou
Created: August 24, 2000
Revised: August 29, 2000