Why does my floating div push around other divs?
- by Meke
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>
