CSS question regarding positioning

I am learning CSS by messing around in Dreamweaver and after really struggling to begin with it seems I have cracked it, albeit at a very basic level. I am creating various small sites just to get to grips with it a bit more but I have become stuck on a small matter.

I have a very wide site (1500px) but have used overflow-x: hidden and kept a vertical scroll bar and it works exactly as I want it too however I would like some text/links on the right of the page and require them to maintain their distance from the right edge of the browser window (much like the search forums button here at macrumors).

I've tried a few things but I'm not quite sure whether I need to change the CSS for the Divtag or the text style and neither seem to do what I want.

Could someone point me in the right direction?

At the moment the text sits right aligned in a 1500 wide divtag so when previewing its off the screen. Hope that makes sense.

Cheers

Wow I thought someone would be able to answer it. I don't know what it is I need to change so I'm not getting the results I require when searching.

ergdegdeg said:

I guess it can be achieved with float:right.

But if you're using Firefox, install the add-on Firebug. It lets you easily inspect other websites and see how they're built.

Click to expand...

If I float right when the window is resized i.e. smaller the text is off the screen. I want it to slide with the edge of the screen.

As you can see from my diagram. The top shows the screen size and the image overflow. If the small rectangle (text) is floated right it goes off screen.

I want it to appear like in the bottom diagram. Whereby if the window size is adjusted the text remains 25px from the right edge of the window.

EDIT: I'm using Safari and Firefox to preview everything and have been looking at the source code on various sites but as I'm new to web design I'm not totally sure what I'm looking for and most of the time can't find what I think I should be looking for.

design-is said:

If you want it to be a fixed position in your browser viewport, why not use position:fixed; with the appropriate values for top:XXpx; right:XXpx; (or bottom & left as you see fit). Sorry if that's not helpful - only read question quickly - will read more in depth on my break and correct if needed.

Click to expand...

Woooo! That did the trick. Thanks. Now I need to rethink my layout totally because I have realised what I have been doing is not really going to work.

Thanks for the tip.

design-is said:

Cool Glad to be of service!

Check out this page to make sure it works in IE6.

Click to expand...

I usually use browsershots.org