responsive CSS display table to block or inline disapearing

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">
      <div id="listingContainer">
          <div id="listing">
              <div id="listings">
                  listing 1
              </div>
              <div id="listings2">
                  listing 2
              </div>
              <div id="listings">
                  listing 3
              </div>
              
          </div>
      </div>
      
      
      
  </div>
  <div id="map-canvas">map</div>
</div><!-- main -->
</div><!-- page -->

CSS

html, body {
   height:100%;
   width:100%;
   padding:0;
   margin:0;
}

#listing {
float:left;
  width: 105%;
  border:1px dashed green;
}
#listingContainer{
    float:left;
    width: 100%;
    max-width:200px;
    border:1px dashed grey;
    margin-left:20px;
    background:yellow;
}
#listings{
    height:200px;
    background:#ccc;
}
#listings2{
    height:200px;
    background:#0f0;
}

#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;
    overflow-y:auto;
   
}
#map-canvas {
    width:52% !important;
    overflow:hidden;
    right:0;
}

@media only screen and (max-width:767px){
        #sidebar, #map_canvas, #main, #header,#nav {
          display:block !important;
        position: static;
        }
    }

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