Block positioning

in Front-end |
Block positioning

In this short article, we will explain how best to position such blocks. These images should be separate blocks as […]


In this short article, we will explain how best to position such blocks.

These images should be separate blocks as the video will play in each of them when you hover.

1. Wrong method

There is a div.hero_picture which hangs as an absolute and stretches to the full width and height of the section.

After that we set the child elements on mod from the centre of the parent block, means there is the positioning of the elements relative to the section through top, bottom, left, right.

The result of the wrong method

//codepen.io/edudiak/embed/MzzVzg/

Cons of this method

  • When reducing the size of these blocks using the font-size setting of the parent block (for this you need to use relative metric units) these blocks are drifted to the left, means they are not tailored exactly to the centre point of their parent block.
  • If you have to align the parent block not to the left edge but to the right, there is also a dead end here, it will not be possible to drift them normally without duck tapes since they are tailored to a block that has a size of 100×100.

2. The right method

The structure we have remains the same. Only now the styles for div.hero_picture will be as follows:

We lay out a parent element in the place where it should be. And the child elements will have the following styles:

Here we set them in the centre of the parent block with the help of top: 50% and left: 50% and after that on the mod from the centre with the help of the margin we move them to the place where they should be according to the layout.

Why this method is good? Now you can move the div.hero_picture block that contains blocks with photos as you want, you just need to change the position and everything will work as it has to.

Also, if you want to scale-down this block using font-size (for this you need to use relative metric units), it will scaling-down as it should, the centre point will be unchanged and the internal elements will not drift to the sides when scaling-down.

The result of the right method

//codepen.io/edudiak/embed/dQQegg/

LET'S CONNECT