I have a div called target which is centred and displayed over a google map when you pan to a map marker, i have since added a menu to the left of the map which means that when the google map pans to a marker it is no longer the centre of the screen.

i need to move the div to the right but i cant seem to move it.

#target {position: fixed; display: none; width: 51px; height: 51px; top: 50%; left: 50%; margin: -40px 0 0 -26px; background: url(../img/target.png) no-repeat center bottom; z-index: 2;}

See screenshot - http://i.imgur.com/gtz6v.png

5 Years
Discussion Span
Last Post by vlowe

left: 50%;

needs to be changed to accomodate the width of the menu

eg menu = 10% of width, left becomes 55%


hmm no doesnt work when window is resized.
i need to put the map and targer div in a wrapper div but when i do that the map doesnt load.. any ideas?


The div needs to be relative to the map, to get this to match i would put the map and the target div inside the same div - leaving the menu outside.

Then make the target div position itself relative to the resizing div.
eg <div id='mapbox' style='position:relative;'>
<div id='targetdiv' style='position:absolute;left:40%;'></div>

all i can think of on it not loading properly is the structure of divs or id's have changed.

<div id='map'>

check to make sure that an extra div hasn't change the structure breaking the map code.

also the reason left:55%; wont work on resize is probably cause there is something on the page forcing the page width to say 800px so when the window goes any smaller left:55% wont get any smaller than 440px changing that so the page will collapse smaller could be another idea to fix it

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.