# Google Map moved/shifted from web browser viewport

**URL:** <https://forum.kirupa.com/t/google-map-moved-shifted-from-web-browser-viewport/278764>\
**Category:** web dev\
**Created:** [January 5, 2009, 1:02pm UTC](https://forum.kirupa.com/t/google-map-moved-shifted-from-web-browser-viewport/278764 "2009-01-05T13:02:51Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![cadmiumgreen](https://avatars.discourse-cdn.com/v4/letter/c/ba8739/32.png) [@cadmiumgreen](https://forum.kirupa.com/u/cadmiumgreen)\
**Post date:** [January 5, 2009, 1:02pm UTC](https://forum.kirupa.com/t/google-map-moved-shifted-from-web-browser-viewport/278764/1 "2009-01-05T13:02:51Z")

</div>

Hello,

My map loads onto the browser, but it clearly it shifts away from the viewport everytime I add an element at the top (the Google Map moves downward). I use the following HTML & CSS structure and model:

\<div id=“container”\>  
\<div id=“searchArea”\>  
\<!–My Search Fields–\>  
\</div\>  
\<div id=“map”\>  
\<!–My Map–\>  
\</div\>  
\</div\>

The CSS implemented is…

body, html  
{  
height: 100%;  
margin: 0;  
padding: 0;  
}

div.container  
{  
position: relative;  
background-color: lightgreen;  
overflow: hidden;  
height: 100%;  
}

div.searchArea {  
background-color: #ffa;  
height:100px;  
}

#map  
{  
position: absolute;  
background-color: gray;  
left:0px;right:0px;bottom:0px;top:0px;  
}

Do I need to add my own custom Javascript so that I can properly anchor the boundries of the Google Map to the boundries of the browser viewport? (of course, it must stay fluid and resize properly)

I also moved the search fields outside the map’s parent container, but…no luck as well.

I’m trying to get it to look like the following:  
[http://www.skibonk.com/ski/index.jsp](http://www.skibonk.com/ski/index.jsp)

The only thing is that the Google Map doesn’t resize properly once I add a header or any other block level element.

Is this problem curable with pure CSS?  
Any sites?

-byron