title: Fluid-width Google maps
body: <p>I have a 2 column layout for the website, with the left fixed-width column and a right fluid-width Google maps that fills the rest of the width not taken by the left column. </p>
  
  <p><strong>Problem:</strong> However I cannot seem to get Google maps <code>&lt;div id="map_canvas"&gt;</code> to be fluid and take up the rest of the width. Did I set it up wrongly? Thanks!</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="main_container"&gt;
      &lt;div id="sidebar"&gt;&lt;/div&gt;
      &lt;div id="map_container"&gt;
              &lt;div id="map_canvas"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>#main_container {
      width: 100%;
      height: 500px;
      float: left;
      clear: both;
      position: relative;
      z-index: 1;
  }
  
  #map_container {
      height: 100%;
      float: left;
      position: relative;
  }
  
  #sidebar {
      width: 270px;
      float: left;
  }
  
  #map_canvas {
      height: 100%;
      min-width: 100px;
      float: left;
      display: block;
      position: absolute;
      z-order: 1000;
  }
  </code></pre>