Home/ Questions/Q 583245
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-13T14:46:20+00:00

I would like to create a webpage with header, footer, left column (25% wide

  • 0

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!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Your problem is that you have a 100px header, and you can’t subtract that from the 100% height you give the map_canvas. So the total height of the construct is of course 100% of the body height, plus 100 pixels that it overflows to the bottom.

    I usually solve it this way. I hate using position: absolute unless really necessary, but I can’t see a better way:

    #map_canvas {
background: #000;
position: absolute;
left: 25%;
right: 0px;
bottom: 0px;
top: 0px;
}
    • 0