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?

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.

.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.

.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

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.