Hi,
I would like to create a webpage with header, footer, left column (25% wide column which contains some buttons etc.) and main content area which has to be filled with google map.
I tried to modify the content from this answer the following way:
<body onload="initialize()">
<div id="wrapper">
<div id="header">Header</div>
<div id="leftcolumn">Left Column</div>
<div id="map_canvas"></div>
<div id="push"></div>
</div>
<div id="footer">footer</div>
html, body {
margin: 0px;
padding: 0px;
height: 100%;
width: 100%;
}
#wrapper {
min-height: 100%;
height: auto;
height: 100%;
margin: 0 auto -100px;
background-color: red;
border: 1px solid black;
}
#header {
background: #438a48;
height:100px;
}
#leftcolumn {
background: #2675a8;
float: left;
width: 25%;
height:auto;
height:100%;
}
#map_canvas {
background: #000;
float: right;
width: 75%;
height:100%;
}
#footer, #push {
background: #df781c;
height:100px;
}
but the parameter height:100%; at map_canvas and #leftcolumn causes the content to exceed the screen size but if the height is not specified tha map can't be seen.
Does anyone how to modify/create the layout in order to to automatically fill the content area with google map?
Thanks!