Hi. I have set in the css sheet. .wrapper { display: block; position: relative; } div.fixed_right_column { display: block; position: fixed; top: 250px; right:10px; } Obviously the .fixed_right_column is enclosed with in the .wrapper div in the html markup. However, the <div class="fixed_right_column">Blah Blah</div> is positioning itself to the screen and not the .wrapper...help. There is a load of other mark-up (too much to paste). What is the most common cause of this issue. I've had it before but somehow fixed it without realizing it. Looking forward to your reply. God bless. In Christ Jesus, Karl.
With position:fixed, the element is treated as an absolute element but, on the screen, the reference for it is the browser viewport.
With respect drhowarddrfine. I have positioned elements as 'fixed' and positioned them relating to the enclosing elements several times with success, ie... not relating to the screen. It can be done, I just don't know why sometimes it works and other times it doesn't. In this case I copied much of the code from another site where it worked, but on this site the same code isn't working...Grrrr God Willing I'll work it out but if there is someone out there who knows what the main reason this happens at times I would be grateful. In Christ Jesus, Karl.
I thought you were saying you were trying to get the element to follow the parent div as you scrolled, not that you were trying to position it with respect to that. Yes, there should be no problem doing that and there is something else on your page causing the problem but, without a link or the complete markup, everything is just a guess.
The site that is working is online, the one that isn't hasn't been uploaded get I don't know if I can post links here as I've only just registered but here goes for the working site.. ...esculent.co.uk/blog/current/october_09.html#signs The Nav-Box on the right is locked to the div.wrapper and is always available even if I scroll...it is not locked to the screen so does not leave the wrapper even on bigger screens. If this link works I'll upload the problem page somewhere...but I don't think it will...No, says: "Live links and signatures are not available to you yet" had to delete the link...handy eh? Still you have to have rules.
Here's the problem page... ...esculent.co.uk/prob/blog/blog.html I'll delete it after a while as I don't want Google referencing it. I'm building it so the code is all over the place. Just need to sort out this one problem, note on this page the Nav-box is fixed to the screen...
Got it too work... way I did it this time was to make sure the enclosing .wrapper had a position: relative; from then on I considered that my little fixed navbox for page navigation, would be fixing to that and it postion certainly was and not to the viewpoint. I gave it a big top: 280px; to clear my header but when I gave it a right :10px; to keep it over to the right-hand-side it fixed to the viewpoint again :O I got around this by giving it a z-index: 3; to raise it above everything (don't know if I needed it but....) then gave it a huge margin-left: 700px; to push it over to the right. I know this margin-left cure will not work on non-fixed-width sites but suites mine. (I'm alright jack, pull-up the drawbridge eh?) Present problem is that height: and max-height are not working in the fixed element! So if I keep adding links in the fixed (navigation box) it runs off the page and you can't see them all...Grrrr... Even overflow: auto/scroll; are being ignored....Grrrr... moody eh? Often have issues with max/min- height being ignored. By the way...just in case anyone mentions this stuff not working in IE, I never bother to support IE6...just use a conditional comment to tell people that and to upgrade if they do try using IE6 on my site....I just can't be bothered.