title: Why does my floating div push around other divs?
body: <p>I have a div which has a table which has a google map.</p>
  
  <p>I want to place a info box within the google map external to the map, just floating on top</p>
  
  <p>But I can't seem to get it right, the info div just pushes around the google map despite being on top of the map...</p>
  
  <p>CSS</p>
  
  <pre><code>.google_map {
      height: 270px;
      width: 100%;
   }
  
      #flightMapInfo {
          position: relative;
          float: left;
          z-index: 100;
          color: #FFFFFF;
          top: 30px;
          left: 50px;
          background:#5a85a5;
          padding: 5px;
          -moz-border-radius: 10px;
          -webkit-border-radius: 10px;
      }
  
  
  div.tabContent {
      border: 1px solid #c9c3ba;
      padding: 0.5em;
      background-color: #f1f0ee;
      min-height: 300px;
  }
  
  
  .tableLeft {
      width: 75%;
      float: left;
      border-right: dotted 2px black;
  }
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>    &lt;div class="mapBlock tabContent"&gt;
          &lt;div id="flightMapInfo"&gt;WHARGL&lt;/div&gt;
          &lt;table class="tableLeft"&gt;
              &lt;tr&gt;&lt;td&gt;&lt;div id="flightMap" class="google_map"&gt;&lt;/div&gt;
                 &lt;/table&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/div&gt;
  </code></pre>