Fixed header (part of fixed positioning)
Code
<!-- IE in quirks mode -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<title
>Fixed header</title
> <style
type
="text/css"
> body{ margin:0; padding:<length> 0 0 0; } div#header{ position:absolute; top:0; left:0; width:100%; height:<length>; } @media screen{ body>div#header{ position: fixed; } } * html body{ overflow:hidden; } * html div#content{ height:100%; overflow:auto; } </style
> <div
id
="header"
> header </div
> <div
id
="content"
> content </div
>
Related examples
One or two columns
- Fixed header
- Fixed header and left-sidebar
- Fixed header and right-sidebar
- Fixed header and footer
- Fixed left-sidebar
- Fixed left-sidebar and header
- Fixed left-sidebar and right-sidebar
- Fixed left-sidebar and footer
- Fixed right-sidebar
- Fixed right-sidebar and header
- Fixed right-sidebar and footer
- Fixed footer
Special examples
- Currently none.
Note
This example is part of a weblog entry and is made by Anne van Kesteren and Arthur Steiner.
A lot more combinations are possible, of course, but it would become impossible to create and list them all. After you understand the theory, you will be fine.