Getting margin to be used only once

How would I be able to set this up so that margin is only used once on the videos and not the covers?

How would I be able to keep the covers centered inside
width: 424px;
height: 238px;

So that, if the margins are changed to the videos, the covers will always remain centered inside that space?

Is this something that can be done, or is it not possible?

https://jsfiddle.net/sjkux183/

Covers
These margins would go away.

.container-left-video .jacket-left {
  position: relative;
  width: 80px;
  height: 80px;
  margin-left: 196px;
}

.container-right-video .jacket-right {
  position: relative;
  width: 80px;
  height: 80px;
  margin-right: 196px;
  background-position: 0 -80px;
  background-size: 100% 200%;
}

Videos
These margins would stay.

.container-left-video .wrap-left {
  position: relative;
  width: 424px;
  height: 239px;
  margin-left: 25px;
  cursor: pointer;
  overflow: hidden;
  border-radius: 25px;
}

.container-right-video .wrap-right {
  position: relative;
  width: 424px;
  height: 239px;
  margin-right: 25px;
  cursor: pointer;
  overflow: hidden;
  border-radius: 25px;
}

The elements are floated so there is no natural alignment. I believe these issues were solved in your other thread using flex.

If you want to use floats then you could set them to 50% width and then use margin:auto to centre the elements.
e.g.

.container-left-video,
.container-right-video{
  width:50%
} 

.container-left-video .jacket-left,
.container-right-video .jacket-right{margin:auto}
1 Like

Perfect. Thank you.

These margins get removed from the covers.

.container-right-video .jacket-left{
  margin-left: 196px;
}
.container-right-video .jacket-right {
  margin-right: 196px;
}

These are the only margins being used now.

.container-left-video {
  margin-left: 25px;
}
.container-right-video {
  margin-right: 25px;
}

So now when the small covers are moved, the videos are moved together.
And now they remain in the middle always.

I made adjustments to it here.
https://jsfiddle.net/358nv49o/6/

.container-left-video {
  width: 424px;
  background: red;
  margin-left: 25px;
}

.container-right-video {
  width: 424px;
  background: red;
  margin-right: 25px;
}

.container-left-video .jacket-left,
.container-right-video .jacket-right {
  margin: auto;
}

Updated Again

I moved them in with the same classes that are already being used.
https://jsfiddle.net/ma9nz3gx/2/

.container-left-video {
  float: left;
  width: 424px;
  background: red;
  margin-left: 25px;
}

.container-right-video {
  float: right;
  width: 424px;
  background: red;
  margin-right: 25px;
}

.container-left-video .jacket-left,
.container-right-video .jacket-right {
  background: url("https://i.imgur.com/fzdYu8g.jpg") no-repeat 0 0;
  background-size: 100% 200%;
  margin: auto;
}
1 Like