Emil Gurbanov Emil Gurbanov - 1 year ago 75
CSS Question

Position absolute divs on the same distance between each other

I have a relative positioned container with many absolute positioned divs inside. I need to position the inners div in the way they are on the same distance between each other using CSS 'left' property.

I can achieve by setting fixed left values to each of them, but prefer to use a function which calculates it regardless how many inner divs a have.

So the desired result is illustrated on the picture below and following by the code I have at the moment. Basically I've just stuck with calculations :)

Thanks in advance for any help.

enter image description here


<div id="bubbles-container" populate-bubbles></div>


position: relative;
width: 100%;
height: 300px;
.bubble {
position: absolute;
border: 1px solid rgba(0, 0, 0, 0.2);
bottom: 0;
border-radius: 10px;
height: 15px;
width: 15px;


app.directive('populateBubbles', [function(){
return function(scope, element, attr){
for (i = 1; i <= 10; i++){
element.append('<div class="bubble bubble' + i + '"></div>');

var bubbleLength = $(this).length;
var bubbleWidth = $(this).width();
var containerWidth = element.width();


Answer Source

If you really cannot use flexbox, here is an other solution using

display: table;
display: table-cell;

Which is compatible with IE10.
-> https://jsbin.com/gepufuy/6/edit?html,css,js,output

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download