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
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
