CSS question regarding positioning

Discussion in 'Web Design and Development' started by MacBoobsPro, Jun 7, 2009.

  1. MacBoobsPro macrumors 603

    MacBoobsPro

    Joined:
    Jan 10, 2006
    #1
    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 :)
     
  2. MacBoobsPro thread starter macrumors 603

    MacBoobsPro

    Joined:
    Jan 10, 2006
    #2
    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. :eek:
     
  3. ergdegdeg Moderator emeritus

    ergdegdeg

    Joined:
    Oct 13, 2007
    #3
    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.
     
  4. MacBoobsPro thread starter macrumors 603

    MacBoobsPro

    Joined:
    Jan 10, 2006
    #4
    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.
     

    Attached Files:

  5. design-is macrumors 65816

    design-is

    Joined:
    Oct 17, 2007
    Location:
    London / U.K.
    #5
    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.
     
  6. MacBoobsPro thread starter macrumors 603

    MacBoobsPro

    Joined:
    Jan 10, 2006
    #6
    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. :eek:

    Thanks for the tip.
     
  7. design-is macrumors 65816

    design-is

    Joined:
    Oct 17, 2007
    Location:
    London / U.K.
    #7
    Cool :) Glad to be of service!

    Check out this page to make sure it works in IE6.
     
  8. MacBoobsPro thread starter macrumors 603

    MacBoobsPro

    Joined:
    Jan 10, 2006
    #8
    I usually use browsershots.org :)
     
  9. design-is macrumors 65816

    design-is

    Joined:
    Oct 17, 2007
    Location:
    London / U.K.
    #9

Share This Page