Beste SD'ers,

Ik ben al een paar uur bezig met dit probleem en ik kom er niet uit! In de bijlage een .jpg bestandje met hoe het er uit zou moeten zien.
Het rode bolletje heb ik inmiddels in CSS, wat ik alleen niet voor elkaar krijg is om het bolletje bovenop de DIV te zetten.

Ik dacht het voor elkaar te krijgen met een position: absolute en dan vanaf bovenaf positioneren met top en left.
Echter moeten er 3 van deze DIV's onder elkaar komen en zijn ze van variabele hoogte. Als ik dus het 2e element vast zet op een bepaalde hoogte (top) dan gaat dit verkeerd zodra de hoogte van de bovenste DIV veranderd.

Kunnen jullie een duwtje in de goede richting geven?

Geef de grijze div een position:relative; mee.

Zet vervolgens het rondje binnen die <div> tags en dan position:absolute: top:-30px; left:300px;
Zo kan je eenvoudig de grijze divs onder elkaar krijgen en kijkt de circle naar de parent positie.

Origineel gepost door Tom giesbergen

Geef de grijze div een position:relative; mee.

Zet vervolgens het rondje binnen die <div> tags en dan position:absolute: top:-30px; left:300px;
Zo kan je eenvoudig de grijze divs onder elkaar krijgen en kijkt de circle naar de parent positie.

Beter geef je de cirkeleen left mee van 50% en een margin-left van 0 min de helft van de width van het rondje.
Zo staat het rondje altijd in het midden ongeacht de breedte van de div.

Code:

   .cirkel{
        position:absolute;
        top: -30px;
        width: 50px; //de breedte van de cirkel
        left: 50%; 
        margin-left: -25px; //0 - de helft van de width
   }

@Tom en @Wilbert
De combinatie van jullie beide tips/code heeft het probleem opgelost, mijn dank is groot!!