Margin-top:auto pushes item too low

Hi guys!

https://zelenskaya.github.io/experiments/sswitch/sswitch-home-css-grid.html

I am trying to align an image of an athlete to the bottom of the cell in CSS grid.
I set margin-top to auto inside the id of the image but this positions bottom line of the image lower than bottom line of another element in the same row.

http://prntscr.com/oetn2y I want to align bottom line on the athlete and bottom of the photo, like on the original site https://sswitch.ch/

Thanks!!!
Anna

Hi there,

Could you share the code via code pen please?

Well, I am a learner too :slight_smile: I’ll try to help you.

If you want to try without sharing the code this might help.

margin-top: auto;
margin-right: auto;
margin-bottom: 0;
margin-left:auto;

Thanks but does not seem to help :frowning:
Maybe I am doing smth wrong.

https://codepen.io/zelenskaya/full/BgeYWe

I forgot to share the URL! Limits can be manipulated

Give me some time I’ll copy your code to my editor to understand what is happening.

Unfortunately, that is not going to be direct help :confused:

I got a bit twisted due to the grid system.

However, what I see is that the p tag for “sswitch”, h1 tag for “Limits can be manipulated”, the greyish background with white circles on and finally the boxer image should be all located in a single div. Then they all should be nested in main tags.

That’s all I can do right now :slight_smile:

Thanks anyway! Somehow this aligning with margin:auto works on the second scroll with the fighter, but not on the first scroll. There must be a simple reason!

1 Like