Position a DIV on each side of 1 main DIV

Question

How do I position 4 DIVs on the sides of another DIV?

1 on the north, 1 south, 1 west, 1 east.

<div id="frame">
  <div id="north"></div>
  <div id="east"></div>
  <div id="map"></div>
  <div id="south"></div>
  <div id="west"></div>
</div>

Note: frame is centered with margin: auto; . The width and height of map can change. Each Div around it should be neatless to the corr. border.

See this picture:

     |-------|
     |  n    |
|----|-------|----|
|  w |  map  |  e |
|----|-------|----|
     |  s    |
     |-------|

How can I do this best?

---

EDIT:

Thanks for the answers so far. I wanted the Navi Divs to be not absolute positioned but more like "linked" to the map Div. Sorry for lacking info.

I am now using jQuery's mouseleave function to determine the direction of the mouse movement when leaving the map. So this is done.

Answer 1

I have created a fiddle here demoing your example. It uses relative -> absolute positioning. It presumes you know exact width / height of the elements.

The Markup:

<div id="frame">
  <div id="north">north</div>
  <div id="east">east</div>
  <div id="map">map</div>
  <div id="south">south</div>
  <div id="west">west</div>
</div>

CSS:

#frame {width: 450px; height: 450px; position: relative; margin: auto;}

#frame div {position: absolute; width: 150px; height: 150px;}

#map {top: 150px; left: 150px; background-color: orange;}

#east {right: 0px; top: 150px; background-color: yellow;}

#west {left: 0px; top: 150px; background-color: blue;}

#north {left: 150px; top: 0; background-color: green;}

#south {left: 150px; bottom: 0; background-color: gray;}

I used some bg colors so it is more visibly clear.

Hope it helps.

Answer 2

Solved my problem: I am now using jQuery's mouseleave function to determine the direction of the mouse movement when leaving the map. So this is done.