kölir: mehrere div-Elemente anordnen

Beitrag lesen

Hallo,

ich habe eine Seite, die sich grob wie folgt einteilen lässt:

- - - - - - -
|             |
| Textabsatz  |
|             |
| - - - - - - |
|             |
|  div#frage  |
|             |
| - - - - - - |
|             |
| Textabsatz  |
|             |
 - - - - - - -

Die Seite ist 100% breit.

Im div#frage sind 5 div-Elemente enthalten. Diese möchte ich innerhalb der 100% breite des div#frage und der div#frage-höhe, die sich für den Bereich ergeben würde, würden die 5 div-Elemente untereinander stehen, mit JavaScript anordnen (jquery oder dojo als Framework).
Und zwar sollen die 5 div Elemente in einem Kreis angeordnet sein. Dabei soll der Mittelpunkt in der Mitte von div#frage liegen. Die Elemente sollen sich gegenseitig nicht berühren also den entsprechend notwendigen Abstand vom Kreismittelpunkt haben bzw. den entsprechend notwendigen Umfang bilden. Dabei kann es natürlich passieren, dass der sich ergebende Durchmesser größer ist, als div#frage breit ist; dann sollen die Elemente eben entsprechend abgeschnitten sein und außerhalb des Anzeigebereichs liegen.

Nun Frage ich mich, wie ich so etwas erreichen kann?

Zunächst starte ich mit

<div if="frage">
  <div id="frage1"></div>
  <div id="frage2"></div>
  <div id="frage3"></div>
  <div id="frage4"></div>
  <div id="frage5"></div>
</div>

und ermittle mit JavaScript die Breite und Höhe von div#frage, die sich dynamisch ergeben hat, und speichere diese in zwei Variablen zwischen.
Dann ermittle ich ebenso die Ausmaße der 5 divs (um später quasi mittelpunktbezogen zu positionieren).

Wie kann ich jetzt am sinnvollsten die Koordinaten für die Positionierung der 5 div-Elemente ermitteln?

Angenommen ich habe die Koordinaten ermittelt, wie ordne ich die Elemente an? Relativ zum div#frage? div#frage hat dabei noch overflow=hidden?

Danke für Anregungen und Tipps

kölir