Fixed sidebar

HTML & CSS
1

Knowing very little about the potential drawbacks, I’m looking for some reliable code for a fixed sidebar page.

Please, thanks, etc.

2

As mentioned above the mechanics are pretty straightforward but the drawback of fixed positioned elements is that if you have set a height of say 400px and your viewport is only 300px high then the 100px of content below the fold can never be reached because you cannot scroll to a fixed element.

Therefore fixed elements are only suitable for elements that are high in the viewport or are fixed to the top or the bottom (headers and footers) and have relatively small heights that fit in the viewport.

You can make a fixed sidebar with an auto height and overflow:auto but then you will get scrollbars on the element should the viewport be small and that will allow the content to be reached.

Here is an example:
http://www.pmob.co.uk/temp/fixed-3col-not-ie6-2.htm

There is no support for fixed positioning in IE6 and although you can fake it - it’s just too much hacking and not worth the effort these days.

Another awkward part of fixed positioning is that the co-ordinates are relative to the viewport and if you want to place a fixed element in a centred layout for example it is a little complicated. You have to position everything as normal and then once everything is in place at the right position you add an inner element which is then set to position:fixed without co-ordinates and it becomes fixed at that point but still stays track with the horizontal position of the layout.

I have an old article here that may be of use.

3

All you need to do is create CSS for it

Example:

#sidebar {
  width: 50px;
  position: fixed;
 height: 300px;
  background-color: green;
color: white;
top: 0px;
left:0px;
}

and html


<body>
   <div id="sidebar">this is side bar</div>
</body>
4

Excellent, thanks to you both.

Hopefully I’ll not need to ask more.