div on top of div with Google Maps API

Question

How do I float a div "menu" on top of my Google Maps API "map" div. And maybe possibly add a transparency of 50% on the menu div. Can this be done?

#map {width: 835px; height 540px; float: left;}
#menu {width: 145px; float: right; padding-top: 10px;}

<div id="map"></div>
<div id="menu"></div>

Answer 1

Not tested, but this should help you go in the right direction:

HTML:

<div id="map">
map content
<div id="menu">
mennu content
</div>
</div>

CSS:

#map {
    width: 835px; 
    height: 540px; 
    position: absolute;/*use position instead of float, this will position the div according to the window*/
    }

#menu {
    width: 145px; 
    position: relative;/*this will position the div according to its parent div "map"*/
    top: 10px;
    left: 10px; /*place the div wherever you want with top and left px, em or % values*/

 /*Use this for your trasparency*/
    background-color: none;
    background-image: none;
    opacity: .5; /*for real browsers (Chrome, Firefox, Safari..)*/
    filter:alpha(opacity=60); /* for IE */
    }

Hope that helps you out :)

Answer 2

Well, the basic structure of a float should contain a wrapping element that has its position property set to something else than the default, and an element that clears the float in the end.
Like this:

#wrapper {
  position:relative;
}
#menu {
  float:right;
}

<div id="wrapper">
  <div id="map"></div>
  <div id="menu"></div>
  <br clear="both" />
</div>

The code provided has not specifically been tested, but the float and the fact that the menu is the higher layer than the map, should make the menu on top of the map in the right side. For the transparency issue, see this fantastic resource.

Hope that helped you out.

Answer 3

Can't you changed the positions of the DIVs like this:

<div id="menu"></div>
<div id="map"></div>

If not you could go something like this:

<div id="map"></div>
<div id="menu"></div>

#menu
{
  position:absolute;
  top:10px;  /* adjust value accordingly */
  left 10px;  /* adjust value accordingly */
}

Update 2

Cross-browser transparency style:

.dropSheet
{
    background-color/**/: #000000;
    background-image/**/: none;
    opacity: 0.5;
    filter: alpha(opacity=50);
}

Just apply the class dropSheet to the element you want to make transparent.