SOLVED - FINAL SOLUTION - 5050 SIDEBAR / MAP

by sebababi

HTML

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

CSS

html, body {
   height:100%;
   width:100%;
   padding:0;
   margin:0;
}
#page {
  display:table;
  border-spacing:0;
  width:100%;
  height:100%;
}
#header {
  display:table-row;
}
#main {
  display:table-row;
  position:relative;
}
#nav {
  background:green;
  width:100%;
  position:absolute;
  left:0;
  right:0;
  height:40px;
}
#sidebar, #map-canvas {
  display:table-cell;
  width:50%;
  bottom:0;
  position:absolute;   
  top:40px;
}
#sidebar {
  background:blue;
   left:0;
   
}
#map-canvas {
    overflow:hidden;
    right:0;
}

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