Inconsistent positioning of elements across document

Question

On this page of the document, I need the images to be arranged messily on the page. My approach is to adjust each one via top and left percentage values. The figure elements are behaving strangely. #num1 does not respond to top at all, while #num4 requires extreme values to function, but #num5 is doing just fine. All 6 #num have the same properties. 1-3 are under <div id="divA" class="row"> while 4-6 are under <div id="divB" class="row">

Here is a link to my CodePen .

http://codepen.io/WallyNally/pen/QEZKrV

Here is the mockup I am working toward.

If you have insight as to why these figures are being difficult, or if you have alternative/improved ways of doing this, please let me know.

Also- once these are arranged, I plan to add script will .on(mouseover) push the non-hoveredfigures away from the hovered element. If there is a way of writing the html/css that would be amenable to being handled by script, bonus points for you.

Questions seeking code help must include the shortest code necessary to reproduce it **in the question itself** preferably in a [**Stack Snippet**](https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/). Although you have provided a [**link to an example or site**](http://meta.stackoverflow.com/questions/254428/something-in-my-web-site-or-project-doesnt-work-can-i-just-paste-a-link-to-it), if the link were to become invalid, your question would be of no value to other future SO users with the same problem. — Paulie_D, Aug 27 '16 at 07:39

score 1 · Answer 1 · edited May 23 '17 at 12:01

I created example here which do not change format of boxes and images. So, first image will have still the same format: 3:2.

box(es) are positioned absolutely to document (topleft corner), width is also calculated from document size.
box-border(s) create right format of boxes.
image-wrapper(s) create position for images - and it should be positioned over the hidden corner.
image-size(s) create right format of images
img use object-fit, which is not compatible with all browsers. If you are looking for for something, what will work on every modern browser, you can use background css style. There is also nice workaround, if you also need img tag for SEO (find Solution 2): Is there an equivalent to background-size: cover and contain for image elements?

#boxes-wrapper {
  position: relative;
  width: 100%;
  padding-top: 63.12%;
}
#box1,
#box2,
#box3,
#box4,
#box5,
#box6 {
  position: absolute;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  height: 0;
}
.box-border {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  -webkit-box-shadow: 0 0 0 2px #5f2325;
  -moz-box-shadow: 0 0 0 2px #5f2325;
  -ms-box-shadow: 0 0 0 2px #5f2325;
  -o-box-shadow: 0 0 0 2px #5f2325;
  box-shadow: 0 0 0 2px #5f2325;
}
.image-wrapper {
  position: absolute;
  height: 0;
}
.image-size {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
}
.image-size img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#box1 {
  top: 21.48%;
  left: 4.88%;
  width: 24.54%;
}
#box1 .box-border {
  padding-top: 67.96%;
}
#box1 .image-wrapper {
  bottom: -2.5%;
  left: -3.05%;
  width: 92.52%;
}
#box1 .image-size {
  padding-top: 66.46%;
  -webkit-transform: translateY(-100%);
  -moz-transform: translateY(-100%);
  -ms-transform: translateY(-100%);
  -o-transform: translateY(-100%);
  transform: translateY(-100%);
}
#box2 {
  top: 31.36%;
  left: 36%;
  width: 19%;
}
#box2 .box-border {
  padding-top: 67.8%;
}
#box2 .image-wrapper {
  top: -7.85%;
  left: -10.68%;
  width: 92.52%;
}
#box2 .image-size {
  padding-top: 66.54%;
}
#box4 {
  top: 54.67%;
  left: 1.42%;
  width: 24.61%;
}
#box4 .box-border {
  padding-top: 67.77%;
}
#box4 .image-wrapper {
  bottom: -11.38%;
  left: 10.74%;
  width: 66.94%;
}
#box4 .image-size {
  padding-top: 104.12%;
  -webkit-transform: translateY(-100%);
  -moz-transform: translateY(-100%);
  -ms-transform: translateY(-100%);
  -o-transform: translateY(-100%);
  transform: translateY(-100%);
}

<div id="boxes-wrapper">
  <div id="box1">
    <div class="box-border">
      <div class="image-wrapper">
        <div class="image-size">
          <img src="http://dummyimage.com/450x300/eee/333333.png" />
        </div>
      </div>
    </div>
  </div>
  <div id="box2">
    <div class="box-border">
      <div class="image-wrapper">
        <div class="image-size">
          <img src="http://dummyimage.com/450x300/eee/333333.png" />
        </div>
      </div>
    </div>
  </div>
  <div id="box4">
    <div class="box-border">
      <div class="image-wrapper">
        <div class="image-size">
          <img src="http://dummyimage.com/450x469/eee/333333.png" />
        </div>
      </div>
    </div>
  </div>
</div>

EDIT: Added boxes-wrapper, because of problem with 2nd row.

Nice technique. Looks like IE11 is the modern browser not in support of object-fit. Can one use this code as the default option, but run a different block in the case this code is not functional? — Naltroc, Aug 27 '16 at 11:58
Even Microsoft Edge do not understand object-fit. But are you sure, you need it? If box1 image will have format 3:2 (10000:6646), it will works fine in every browser. If box2 will have format 3:2 (10000:6654), it will works fine as well. If you are not sure and somebody else will upload his own images, of course, there are solutions. Do you need this solution? — Maju, Aug 27 '16 at 12:10
I see there another problem. Second row can be over the first row if you will not have enough space for it. Because width is calculated from 100% screen size, but height is calculated from width of each block. So screen height can not affect box height. It can make troubles - I will modify the code to solve that issue. — Maju, Aug 27 '16 at 12:19
After a bit of confusion, I found that this does not work with `
` tags, neither within nor wrapping the #box id. But, once removed, it works perfectly. Thank you so much. — Naltroc, Aug 27 '16 at 13:31

Inconsistent positioning of elements across document

1 Answers1

Linked