Margin-top:auto pushes item too low

Hi guys!

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. I want to align bottom line on the athlete and bottom of the photo, like on the original site


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;

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

I forgot to share the URL!

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