Question

I tried, but totally failed at positioning an interface that will go above a google maps layout. What I tried to do is this:

But I ended up with this

The format I have is like this:

<div id="GoogleMap"> // the containing google maps layer
    <!-- map will go here <div id="GoogleMapCanvas"></div> --> //eventual map
    <div class="map-topmenu"></div>   //my interface
    <div class="map-leftmenu"></div>  //my interface
    <div class="map-rightmenu"></div> //my interface
    <div class="map-bottommenu"></div>//my interface
</div>

I succeeded in making the top menu horizontally centered, and 10px from the top of the screen.

I have been unable to center vertically the left and right menu’s, and I started noticing that the code needed to center the left menu was becoming weird.
And as for the bottom menu, I utterly failed – however many different methods I tried.

Can anyone please look at my code and let me know where I messed up? Thanks so much!

body {
    border: 0 none;
    margin: 0;
    padding: 0;
    height:100%;
}
#GoogleMap {
    position:absolute;
    background-color: grey;
    background-position: 50% 50%;
    background-repeat: repeat;
    height: 100%;
    overflow: hidden;
    width: 100%;
}
.map-topmenu {
    height: 52px;
    width: 353px;
    background-image: url(http://i.imgur.com/KlyKR.png);
    margin-top: 10px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
}
.map-leftmenu {
    height: 263px;
    width: 77px;
    margin-left: 10px;
    top:50%;
    position: absolute;
    margin-top: -150px;
    background-image: url(http://i.imgur.com/Q3d1r.png);
}

.map-rightmenu {
    background-image: url(http://i.imgur.com/si6dl.png);
    height: 147px;
    width: 280px;
    margin-right: 10px;
    float: right;
    top:50%;
}
.map-bottommenu {
    background-image: url(http://i.imgur.com/iDmuP.png);
    height: 52px;
    width: 312px;
    margin-right: auto;
    margin-bottom: 10px;
    bottom: 0;
    margin-left: auto;
}

Answer 1

Use absolute positioning with negative margins:

http://jsfiddle.net/PJTDy/3/

#GoogleMap {
    position:absolute;
    background-color: grey;
    height: 100%;
    overflow: hidden;
    width: 100%;
}

.map-topmenu, .map-leftmenu, .map-rightmenu, .map-bottommenu {
    z-index:1;
    position:absolute;
    background:blue;
} 
.map-topmenu {
    top:0;
    left:50%;
    margin-left:-176px;
    height: 52px;
    width: 353px;
}
.map-leftmenu {
    height: 263px;
    width: 77px;
    left:0px;
    margin-top:-131px;
    top:50%;
}
.map-rightmenu {
    height: 147px;
    width: 280px;
    right:0;
    top:50%;
    margin-top:-73px;
}
.map-bottommenu {
    height: 52px;
    width: 312px;
    bottom: 0;  
    left:50%;
    margin-left:-156px;   
}