Div-Circle

<html>
    <head>
        <style>
            #outer{
                position: relative;
                height: 600px;
                width: 600px;
                border: 1px solid red;
            }
            .inner{
                position: absolute;
                border: 1px solid black;
                height: 60px;
                width: 60px;
            }
        </style>
    </head>
    <body>
        <div id="outer">
            <div class="inner"></div>
            <div class="inner"></div>
            <div class="inner"></div>
            <div class="inner"></div>
            <div class="inner"></div>
            <div class="inner"></div>
            <div class="inner"></div>
            <div class="inner"></div>
            <div class="inner"></div>
            <div class="inner"></div>
            <div class="inner"></div>
            <div class="inner"></div>
            <div class="inner"></div>
            <div class="inner"></div>
            <div class="inner"></div>
            <div class="inner"></div>
            <div class="inner"></div>
            <div class="inner"></div>
            <div class="inner"></div>
        </div>
        <script>
            var outer = document.getElementById('outer');
            var outerWidth = document.getElementById('outer').offsetWidth;
            var outerHeight = document.getElementById('outer').offsetHeight;
            for(var i = 0; i < outer.children.length; i++){
                var r = outerWidth / 2 - outer.children[i].offsetWidth / 2;
                var phi = i / outer.children.length;
                var x = r * Math.cos(phi * 2 * Math.PI) + r;
                var y = r * Math.sin(phi * 2 * Math.PI) + r;
                outer.children[i].style.left = x+'px';
                outer.children[i].style.top = y+'px';
                console.log(outer.children[i].style.left);
            }
        </script>
    </body>
</html>