Issue with relative box when window resized

Discussion in 'Programming' started by elieg, Jun 8, 2013.

to remove all ads.
  1. elieg

    elieg New Member

    Messages:
    2
    http://www.webdesignforum.com/I'm trying to implement the sliding transparent overlay on my sight but I'm having a problem with the positioning of the DIV. When the window is re-sized the div does not retain relativity to the menu items above. Can someone give a pointer as to how this can be achieved?

    This is what I'm trying to emulate.......http://www.daphnes-restaurant.co.uk/general-information/

    Here's my website.........http://www.galu.co.uk/newsite/goforitg.html

    The yellow box remains relative to the red box but when my window is re-sized I would like the red box to be left align to the window so the users can see easier. A kind of "left align object£ on window re-size. If that makes sense.
     
  2. ronaldroe

    ronaldroe Super Moderator Staff Member

    Messages:
    1,223
    A couple of problems here:
    1. position:float isn't a thing. You probably meant float: left, though I'd say position:relative would serve you better.
    2. The margins you have are scaling with the page, so as you zoom in, that number gets bigger. For instance, you have margin-left set to 300px. When you zoom to 110%, that becomes 330px. To keep it pinned in place, you'll have to use percentage-based units. Em units won't work in this case for the same reason px don't. Percent, on the other hand with keep them in the same spot, since the percentage is based on the width of the parent element, in this case the body, which is the width of the viewport.
     
  3. chrishirst

    chrishirst Well-Known Member Staff Member

    Messages:
    2,662
    Actually; ems and exs DO 'zoom' because they are based on the root font size and inheritance, but they DO NOT change on element resizing.
     
  4. ronaldroe

    ronaldroe Super Moderator Staff Member

    Messages:
    1,223
    Which was the exact issue with them in this case. % will keep it in the same spot.
     
  5. elieg

    elieg New Member

    Messages:
    2
    Thank you for the supplied info on this. Having another look at my code............
     

Share This Page