Book HomeCascading Style Sheets: The Definitive GuideSearch this book Friday 22nd of August 2014 05:56:18 AM

9.4. Fixed Positioning

As implied in the previous section, fixed positioning is just like absolute positioning, except the containing block of a fixed element is always the viewport. In this case, the element is totally removed from the document's flow and does not have a position relative to any part of the document.

This can be exploited in a number of interesting ways. First off, it's possible to create frame-style interfaces using fixed positioning. Consider Figure 9-24, which shows a very common layout scheme.

Figure 9-24

Figure 9-24. Emulating frames with fixed positioning

This could be done using the following styles:

DIV#header {position: fixed; top: 0; bottom: 80%; left: 20%; right: 0;
background: gray;}
DIV#sidebar {position: fixed; top: 0; bottom: 0; left: 0; right: 80%;
background: silver;}

This will fix the header and sidebar to the top and side of the viewport, where they will remain regardless of how the document is scrolled. The drawback here, though, is that the rest of the document will be overlapped by the fixed elements. Therefore, the rest of the standard color values for these names. Declaring that an elementshould be colored orange doesn't mean thatdifferent browsers, or even the same browser running on differentplatforms, will produce exactly the same shade of orange. With thesixteen standard colors, there is at least some hope that they willappear as similar as possible, because the color values for thesesixteen are defined. Beyond those, all bets are off. Browsers mayimplement similar shades for the same color name, or they may not;the differences may be imperceptible to the eye, or so obvious thatthey're almost jarring. content should probably be contained in its own DIV and employ the following:

DIV#main {position: absolute; top: 20%; bottom: 0; left: 20%; right: 0;
overflow: scroll; background: white;}

It would even be possible to create small gaps between the three positioned DIVs by adding some appropriate margins, demonstrated in Figure 9-25:

BODY {background: black; color: silver;}  /* colors for safety's sake */
DIV#header {position: fixed; top: 0; bottom: 80%; left: 20%; right: 0;
background: gray; margin-bottom: 2px; color: yellow;}
DIV#sidebar {position: fixed; top: 0; bottom: 0; left: 0; right: 80%;
background: silver; margin-right: 2px; color: maroon;}
DIV#main {position: absolute; top: 20%; bottom: 0; left: 20%; right: 0;
overflow: scroll; background: white; color: black;}
Figure 9-25

Figure 9-25. Separating the "frames"

Given such a case, a tiled image could be applied to the BODY background. This image would show through the gaps created by the margins, which could certainly be widened if the author saw fit. For that matter, if a background image was of little importance, simple borders could be applied to the DIVs instead of margins.



Library Navigation Links

Copyright © 2002 O'Reilly & Associates. All rights reserved.

the placement of a floated element. They are vaguely similar to thosethat govern the evaluation of margins and widths and have the sameinitial appearance of common sense. They are as follows:

1. The left (or right) outer edge of a floated element maynot be to the left (or right) of the inner edge of its parentelement.

Straightforward enough. The furthest to the left the outer left edgeof a left-floated element may go is the inner left edge of its parent and is strongly preferred over other methods of settingline-height.

The drawback to using a number value is that IE3 will interpretit as a number of pixels. See Chapter 8, "Visual Formatting" for adetailed discussion of line-height and line boxes.

Example

P {line-height: 18pt;}H2 {line-height: 200%;}
list-styleIE4 P/P IE5 Y/Y NN4 P/P Op3 Y/-

A shorthand property condensing all that has been floated becomes a block-level element, regardless of itsprevious status. Thus, if an image (which is ordinarily treated as aninline element) is floated, it becomes a block-level element. Thisblock-level status helps explain why when an element is floated,other content flows around it.

Remember that if you float atextelement, its width will tend toward zero. This is exactly theopposite of the normal horizontal rules, where another. Note that sub does not imply a change in the element's font size, so it should not cause subscripted text to become smaller (or larger). Instead, any text in the subscripted element should be, by default, the same size as text in the parent element, as shown in Figure 4-32:

SUB {vertical-align: sub;}
<P>This paragraph contains <SUB>subscripted</SUB> text.</P>
Figure 4-32

Figure 4-32. Subscript alignment