I have a div which has a table which has a google map.

I want to place a info box within the google map external to the map, just floating on top

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...

CSS

.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;
}

HTML

    <div class="mapBlock tabContent">
        <div id="flightMapInfo">WHARGL</div>
        <table class="tableLeft">
            <tr><td><div id="flightMap" class="google_map"></div>
               </table></td></tr></div>