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