Why does the eyes stand outside of the div and get pushed down?

the eyes keep standing outside of the eyes div even though they are in the same class. why is this happening?

6 Replies

Yido•3mo ago

code: https://codepen.io/SirYido/pen/poBbRxK (please change the view to the side so you can see)

You have this:

<div class="eyes">
  <div class="eyes face_part" id="eye1"></div><div class="eyes face_part" id="eye2"></div>
</div>

<div class="eyes">
  <div class="eyes face_part" id="eye1"></div><div class="eyes face_part" id="eye2"></div>
</div>

and

.eyes {
  position: relative;
  top: 250px;
}

.eyes {
  position: relative;
  top: 250px;
}

The outside div has class="eyes" and so do both inside divs. So, you have a top: 250px, that moves the parent down, and then, the inner ones are moved another 250px down from that point.

Yido•3mo ago

so what can i do about it? How can i make both go down at the same rate and not the other one being pushed down more then the other when i use top:250px

Kevin Powell•3mo ago

I'd remove .eyes from the outer div, but keep it on both of the ones on the inside. If you need to position/move the outer one, give it a different name 🙂

Yido•3mo ago

so i have done a few changes on my code and im still getting the same type of problem :( what have ı done is i have deleted the face_part div entirely and kept the eyes div instead. Then i wanted to center the eyes div and i have used position: relative; left: 20%; but when ı checked again the eyes was still not in the box completely. the updated code: https://codepen.io/SirYido/pen/poBbRxK

SirYido

CodePen

poBbRxK

...

glutonium•3mo ago

cause u have left 20% on .eyes both parents and child's have same class name both r being offset by 20% towards right i recommend using different class name for the parent and the childrens tho u can still work around by deleting the left 20% from .eyes{...} and adding .eyes:has(.eyes){ left: 20% } which only targets the parent u can give the parent a class name such as .eyes-container which is also more descriptive

Gaming

Programming

Why does the eyes stand outside of the div and get pushed down?