Change div position when it is rendered?

#1

Hi, I’m using the very basic #each method to reactively generate new divs from a textarea, but what I want it to do is change it’s positioning each time something is added.

        {{#each story}}
		<div class="storyBlock" style="left: {{storyPos}}">
			<div class="date">{{displayDate}}</div>
			<div class="story">{{storyContent}}</div>
		</div>
	{{/each}}

I figured that the style for left css positioning could be changed each time a new div is rendered. Problem is I’m not really sure how or where to create the random number to insert dynamically.

Is it when the textarea is submitted? Is it when a new div is created? It would be great to learn how to style things reactively.

#2

look into flexbox, it allows you to reorder your divs and set their flow or even have them expand to fill a given space.

#3

Thanks but that wasn’t what I was searching for. I wanted each div to have a random position on the screen as they are being created.

Figured it out. I just have a random value that I want put in place as a helper function called StoryPos. Seems to work out just fine.