Bert
Bos, style activity leadCopyright © 1994–2021 W3C® Privacy policy
Created 17 January 2001;
Last updated Wed 06 Jan 2021 05:40:49 AM UTC
See also the index of all tips.
On this page:
The menu you see on the right on this page is simply a UL list. But, it stays fixed when you scroll the page. (You may have to make the window smaller to get a scroll bar first.) All the work to make it stay in place is done by rules in the style sheet. Here is the mark-up of the menu, it is taken straight from the source of this page:
<ul id=menu> <li><a href="#L384">Section 1</a> <li><a href="#details">Section 2</a> <li><a href="#FAQ">Section 3</a> </ul>
In a browser without CSS, or with CSS turned off, it will just be a normal list with links. But with CSS, thanks to the rules below, it will appear to “float” on top of the page, pinned to the right side of the browser window:
#menu {
position: fixed;
right: 0;
top: 50%;
width: 8em;
margin-top: -2.5em;
}
The interesting rule here is the 'position: fixed', that makes the DIV stay fixed on the screen. The 'top:
50%' and 'right: 0' determine where the DIV
is displayed, in this case: 50% down from the top of the window,
and a constant 0px from the right. Other properties, margins,
borders, colors, etc., can be added according to personal taste.
There exist also 'left' and 'bottom' properties, to anchor the element to the left or bottom of the screen.
More precisely: Once an element has been fixed with 'position: fixed', the three properties 'left', 'width' and
'right' together determine the horizontal position and size,
relative to the window. (CSS uses the more general word viewport; a window is an example of a viewport.)
You need at most two of the three properties, i.e., left & width, right & width, or left & right. Setting just one of the three, or none at all is also possible. In that case, CSS will use the element's natural (“intrinsic”) size and/or position, as needed, for any properties that are left at their default value ('auto').
The same holds for the trio 'top', 'height' and 'bottom'. You need to set at most two of them: 'top' if you want to control the distance from the top of the window, 'bottom' to control the distance from the bottom, and 'height' if you want to specify a fixed height.
If you look at the actual style sheet embedded in this page, you will see some additional rules that appear to contradict each other. Those are there to protect against bugs in a few older browsers. See below.
If you look at this page with Microsoft Internet Explorer 5 or 6 on Windows (“WinIE5” and “WinIE6”), you'll notice that it doesn't work. Many people ask me about that, so here is bit of explanation. In brief: the bug is in the browser, not in this page.
WinIE5 and WinIE6 don't implement 'fixed'. That is unfortunate, but the bigger problem is that they also don't parse the 'position' property correctly. A browser that doesn't know 'fixed' should throw away the rule 'position: fixed' and fall back to whatever the previous value of 'position' in the style sheet was. We could then add 'position: absolute' just before the 'fixed' and the browser would use that. But in WinIE 5 and 6 that is not what happens. Apparently the keyword 'fixed' is somehow interpreted as 'static'.
You cannot make WinIE5 and 6 support 'fixed', but there is a work-around for the parsing problem. Johannes Koch alerted me to this trick (from his collection of work-arounds [page at archive.org]). First replace the 'position: fixed' in the style rules above by 'position: absolute' and then insert the following rule in the style sheet:
*>#intro {position: fixed}
The effect of this is that browsers that know about the '>' (child) selector of CSS will use this rule, but browsers that don't, in particular WinIE5 and WinIE6, will ignore it. The rule 'position: absolute' will be used instead and the menu will be in the right place, except that it will not stay fixed when you scroll.
It is important that there are no spaces around the '>'.
Bert
Bos, style activity leadCreated 17 January 2001;
Last updated Wed 06 Jan 2021 05:40:49 AM UTC