How to force boxes / containers to follow each other and avoid absolute positioning?

All my containers seem to be created with fixed positioning although it varies a lot for some reason.

So, if I have container 1 and container 2 underneath it, it will show container 2 with a 1000px top margin/padding on the docking section. This means that if more content is added to container 1 it ends up on top of container 2 because container 2 was given 1000px from the top. Removing the 1000px from the top forces container 2 on top of container 1.

In some situations container 2 has no top margin/padding yet it sits where it is supposed to sit. I can find nothing in the settings to control this. Both of these boxes seem to have the same settings but behave differently.

I created a Youtube video to demonstate. Watch the docking box in the right-hand side for the values for top margin/padding. Notice that one of the containers has the top padding and 1 does not, but both maintain a position which is quite far down the page.

Youtube video

Is it margin or padding? Normally in css margin and padding are separate, but in eidtorx it’s not clear which we’re editing and we only have 1 of the 2.

This means it’s pinned to that way (in this case, to the top). This is from container 2, so it’s pinned to the top, and if you set it to 0 it will be all the way in the top. But for container 1 it’s not pinned anywhere, so it will center itself in the middle.

But my 2nd box down is set to 0px from the top yet it is not at the top of the page.

It’s top of the container/section it’s in, not the top of the page.

The screenshot you sent is not pinned

Click this to pin it to the top.

With no pins it will center itself

I would split the section into different rows if you want to keep them seperated

@simen, what I need to know is when docking to the top is enabled, is it supposed to:

  • Dock to be next to the next available sibling container
  • Dock to the top of the container regardless of overlap with previous sibling

Right now changing the docking does not seem to alter the position of the existing boxes.

The problem I have is that I just want the sibling elements to be aligned relative to each other so that when I resize them they will end up next to each other regardless of size, but if they are always 500px from the top, then when new content is added to existing boxes they will always overlap and require re-positioning.

When you said split it into separate rows do you mean with grid lines?

If docking to the top, they dock to the top of the section/container/cell they are in.

If you want to make sure a second container moves down if the container above it takes more space you need to add more rows, then add each container to their own row, and set the row’s height to auto.

By rows do you mean grid lines or “Sections” @simen ?

What do you mean by a row @simen ?