Create and equally distribute elements with position absolute?

[ReGGaeBOSS]

Hi,

I am currently learning JS and are doing simple “experiments” as a way of learning.

In this one I am creating a number of elements and then creating a number of elements inside these. Atm it’s a total of 400 elements (20x20) (stripes and crosses).

If I wanted to not have a set number of elements like now, and instead take the number as a parameter, how would I go on to:

1. make the width of the first bunch of elements equal adding up to 100% width of the parent? Would i take the width of the parent and then divide it by the number(parameter) given and then apply this as the value?

2. How to equally distribute the dots with position absolute along the width of the parent stripe with the “left” css attribute?

All in all, how would you replicate something like this http://codepen.io/ReGGae/pen/NxPboz?editors=001 in a more dynamic way?

[Dormilich]

step 2 is not necessary. if you use inline-block styling with an appropriate width the elements will line up by themselves.

hm, you wouldn’t even need “rows” for that, if you’re just after the optical effect.

[ReGGaeBOSS]

Okey cool. Will try that.

What I am trying to replicate is something like the background of http://resn-experiments.tumblr.com/ , with the hover effect after I am successfully creating the “dot layout”. They have some click and drag effect also which I guess is kind of complicated (at least to me).

And as said, this is my way of learning stuff (learn by doing), not to be able to create an exact replica, more to learn more of the syntax and ways of doing stuff.