View Full Version : Static/fixed sidebar

02-16-2011, 02:08 AM
Apologies if this in the wrong section.

Is it easy to customise a website/blog so that the sidebar remains static and doesn't scroll with the rest of the page?

I'm not asking for anyone to go to the trouble of explaining the whole process to me, but if anyone knows of a site that has a step by step 'idiot sheet' for doing this, I'd appreciate the link.

This is the kind of thing I'm talking about, but my (lack of) knowledge when it comes to coding means I don't know what section of that templates html/css controls the static sidebar. If someone could look over the sourse code of the following site and tell me where the relevent block of code begins, It'd be a step closer.


Thanks in advance.

02-16-2011, 02:19 AM
Its being styled in the stylesheet by the
#main_nav style rule. position: fixed; specifically sets that navbar to a fixed position and not scroll with the rest of the page.

02-16-2011, 02:27 AM
So the only line of code I need to fix a sidebar is:

#main_nav style rule. position: fixed;

02-16-2011, 02:34 AM
Ok I'm confused. The link you posted is not your site? And I thought you were asking what css specifically fixed that sidebar so it didnt scroll. The css code I showed you sets the sidebar as in the link you provided. If you dont want it fixed then yes remove position: fixed;

You asked about some tutorials. w3schools.com (http://www.w3schools.com) is pretty good for learning beginning html and css along with other client and server side languages.

02-16-2011, 02:39 AM
Sorry, teedoff.

The site I posted is not my site. It's a template I was using for my blogger blog, but for various reasons Ican't use it. I used it merely as an example of the static sidebar, in the hope that I could apply the relevent code to another template that doesn't have a static sidebar.

I've searched for templates with static sidebars, but there doesn't seem to any coming up in my search results - which is why I'm looking to convert one.

I was just hoping there was a simple block of code I could apply to the html/css to make the sidebar static, in a template that doesn't already have a static sidebar.

02-16-2011, 02:44 AM
Google 2 column layouts. Theres lots around. Then you can add a menu(if needed) and then add the above position: fixed; to it.
Once you have a 2 column layout, and you need help, then post back your issues.

02-16-2011, 02:46 AM
Thank you so much, teedoff, I really appreciate your help.

So if I find a two column template that I like, I post the link here and you'll tell me where to insert the code that will fix the sidebar?

02-16-2011, 02:57 AM
Sure. just post your link or code and we'll try and help as best as we can.

02-16-2011, 03:09 AM
Thanks again, Teed.

Okay, I know it's a mess, but I can sort that out later. If you could tell me how to fix the sidebar on this blog I'd be forever grateful.


I'll probably be turning in soon (bed) so I may not get back to you tonight. But I will return tomorrow at some point.

A better and cleaner example of what I'm looking to achieve can be seen at this site:


02-16-2011, 10:18 PM
Can anyone else pick this up? It seems from Teed that it's a fairly simple process, but it's still beyond my capabilities.

02-17-2011, 06:00 PM
Never mind, I've done it. Thanks for your help, Deed.

02-17-2011, 06:07 PM
ahh Sorry I completely forgot about your post. Glad you got it working!