Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Fixed-positioned div overlaying text when resizing window

    Hello!

    This is my first post on this forum and I hope I have followed all regulations and guidelines ;)

    Anyway, I have a certain problem with my website.

    It features one fixed div with an image in it ("Pawel Glaz" on the right). The idea was that I wanted that div to stay in place, all the time.

    The problem, however, is that when user resizes the window greatly, or (which is more likely) views that page on a mobile device, that div overlaps the rest of the text. Try resizing your browser window either from right or left.

    You can view the CSS code for that website here. Below I extract the part of code responsible for handling that fixed div:

    #1
    Code:
    /************/
    /*** MENU ***/
    /************/
    
    (...)
    
    #myname
    {
    position: fixed;
    top: 5px;
    right: 15px;
    z-index: 2;
    width: 349px;
    height: 90px;
    }
    What I would like to do is to set some absolute, minimum width of the page so when users resizes the window and reaches it, window will present a scrollbar but will not allow any overlay like this. I have somehow achieved it on my website with that white box where text is located. It will make a scrollbar appear as soon as you resize the browser window to that box's width and will not allow any more changes to the layout. I would like to extend that "protective bubble" to a width where my fixed divs would not screw up my layout :P

    As you possibly have noticed by now, I am not a professional coder - that layout took me quite a lot of time to create so please treat me as an amateur when providing your answers. I might as well learn something new, apart from just fixing my issue :-)


    Thanks in advance!

  • #2
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    No one knows how to do it? :(

  • #3
    New Coder
    Join Date
    Nov 2011
    Posts
    24
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Unfortunately as an amateur it is tricky. Read up on responsive design.

    From a design point of view, you really, REALLY don't want a horizontal scroll if you can help it (If I have understood your intentions correctly) .


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •