template - header + sidebar half page + google map half page

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false"></script>
<div id="header">header</div>
<div id="map-canvas"></div>
<div id="sidebar">sidebar</div>

CSS

html, body {
        height: 100%;
        margin: 0px;
        padding: 0px;
        max-height:100%;
      }
      #map-canvas {
        height: 90%;
        margin: 0px;
        padding: 0px
      }
      #sidebar{
      background-color:grey;
      width:200px;
      height:100%;
      float: right;
      }
      #header{
      background-color:green;
      width:100%;
      height:40px;
      }

JavaScript

var map;
function initialize() {
  var mapOptions = {
    zoom: 8,
    center: new google.maps.LatLng(-34.397, 150.644)
  };
  map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);
}

google.maps.event.addDomListener(window, 'load', initialize);