Issue with relative box when window resized

[elieg]

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.

 

[ronaldroe]

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.

 

[chrishirst]

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.

 

[ronaldroe]

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.

Which was the exact issue with them in this case. % will keep it in the same spot.

 

[elieg]

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