Hi,
I'm working on a site and am wanting to create a navigation on the left hand side of the screen that scrolls up and down with the page, and then have the main content on the right. I've managed to get this affect happening by putting the navigation in a div called #nav, floating it left and then giving it a position of fixed.
The problem is when viewed in a screen of resolution of 1024 x 768 or smaller, one needs to scroll to the right in order to see all the main content. I have no problem with that. The problem is that the #nav on the left hand side then overlaps the main content as the page is panned to view the rest of the content.
Any way of making the #nav have a position fixed only in the y-axis? I've read that it is not possible with CSS alone, and that I may have to use Javascript. I don't mind, as long as I can get the desired affect.
I'm working on a site and am wanting to create a navigation on the left hand side of the screen that scrolls up and down with the page, and then have the main content on the right. I've managed to get this affect happening by putting the navigation in a div called #nav, floating it left and then giving it a position of fixed.
The problem is when viewed in a screen of resolution of 1024 x 768 or smaller, one needs to scroll to the right in order to see all the main content. I have no problem with that. The problem is that the #nav on the left hand side then overlaps the main content as the page is panned to view the rest of the content.
Any way of making the #nav have a position fixed only in the y-axis? I've read that it is not possible with CSS alone, and that I may have to use Javascript. I don't mind, as long as I can get the desired affect.