How can I keep position:fixed elements from falling off the page?

I'm working on a site with a div element with a fixed position, some 800 pixels from the left. The site is optimized for 1024x768. However, if a user with a resolution of 800x600 views the page, this div element will be missing, and the user won't be able to scroll over to see it. Is there some way I can get around this?

One idea would be to align the div on the right instead of the left, but I don't want a lot of whitespace between my content (on the left) and my div (on the right). I was hoping that I could specify a parent element with a relative position, and that position: fixed would reference the position of the parent element, but that only seems to work when the child div element is position:absolute, not position:fixed.

Thanks for any insight.

I'm new to CSS, but here are some observations, for what they're worth:

800 pixels from let sounds a bit wide to me. I prefer to keep stuff on the screen that everyone will see (horiz scrolling is a pain...)

Anyway, the idea of position: fixed is that the element is fixed in relation to the browser window, not any element on the page. In other words, the fixed element does not move even if the user scrolls down the page.



No, only position: absolute will reference the parent element. Pos: fixed has a different role.

One thought: You could tell the element to float: right (say within the main div), and then it will always sit on the right-hand side of the page, no matter how wide someone's browser window is. At the moment it doesn't sound like you are using floats, but they are very handy. The rest of your content (perhaps with a fixed width) could float left. To prevent your element floating too far from the left content on wide screens, you could put everything in a main div and apply a max-width: xxxpx; (and maybe a min-width: xxxpx too).

Hope that helps!

Arem, thanks for your response. I understand my post may be slightly confusing, unfortunately Dev Shed doesn't allow me to create a post containing a URL (I'm still a new user) otherwise I'd send a link.

The element in question is a sidebar, about 200 pixels wide, positioned 800px from the left. The content of the page takes up the first 800px, and the sidebar is on the right. Unless you have a resolution under 1024x768, you won't have any horizontal scrolling.

But seeing as how the sidebar is using fixed positioning, I can't scroll horizontally when it falls off the page, and that's the point. For small resolutions or for people who don't maximize their browser windows, the sidebar becomes invisible.

I'd like to make the sidebar always visible, and always on the right side of the content, without ever falling off the side of the page. I'm beginning to think that I can't do this with CSS alone.

OK, I assume that you want the right sidebar to be visible always, even if the user scrolls down.

I'm inexperienced, but I bet you can do what you want with css.

Here's an idea: I would try one big div with position: relative. Inside this put your content and sidebar divs, with absolute positioning. Set a fixed height on the content div (so that it fits on the page) and use {overflow: scroll;}. That way, the sidebar will always be visible on the right and the user will just scroll through the content.

Well, it's a thought, anyway!

BTW, if we can't (as new users) post urls, perhaps we can write them as text, like www dot mysite dot com. Also, when you reply to a post, I would recommend deleting all the quoted material that appears by default.

Thanks Arem, I understand your idea, unfortunately that's not quite the design we're looking for. I appreciate the suggestions, though.

Position it from the right, not the left.
ie. instead of

left:800px;

use

right:200px;

That's really about the best way I can think of for this problem.

Another way would be to position you right column absolute based off the screen. Then make your main div 100% width and put the scroll bar on that. Basically the right col floats above the full width main div. Probably end up messy though and possible multiple scroll bars showing up on smaller resolution.

Edit: Just re-read the thread and my second suggestion is basically what Arem said, so scrap that :P.