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

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.