Fixed header and right-sidebar (part of fixed positioning)
Code
<!-- IE in quirks mode -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<title
>Fixed header and right-sidebar</title
> <style
type
="text/css"
> body{ margin:0; padding:header-<length> right-sidebar-<length> 0 0; } div#header{ position:absolute; top:0; left:0; width:500%; height:header-<length>; } div#right-sidebar{ position:absolute; top:header-<length>; right:0; width:right-sidebar-<length>; height:100%; } @media screen{ body>div#header{ position:fixed; } body>div#right-sidebar{ position:fixed; } } * html body{ overflow:hidden; } * html div#content{ height:100%; overflow:auto; } </style
> <div
id
="header"
> header </div
> <div
id
="right-sidebar"
> right-sidebar </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.