Overlapping Sidebar

[Stargater59]

Hello,

I've been redesigning my website, and got the idea to make a overlapping sidebar for the one section of my site. I've been able to make it overlap, but it has a few problems..

Basically, my site is all wrapped in a DIV tag. The sidebar is in another DIV tag. The CSS for the sidebar (to make it overlap) is:



#sidebar {
width: 150px;
position: absolute;
left: 20px;
z-index: 10;
background-image: url(images/dropdownbg.png);
}


But, with this no matter how big or small the browser window is, the sidebar stays 20px off of the left side. I need the sidebar to stay static on the page.

And if I'm not being clear (I don't explains things good at all...) here is an example.

Here is my site (the new design, anyhow): http://forums.unhealthyobsession.net/unhealthyobsession/about/

Notice the sidebar. If you're screen resolution is 1024x768 is should look perfect. Anything above or below that, it's not going to look right at all.

Here is what I'm wanting to do:
http://www.garrysmod.com/wiki/?title=Main_Page

Notice that sidebar. It stays in the same spot no matter what.

Is there a way I can achieve this?

Thank for any help.

Edit:

I have gotten help on this.