HTML & CSS Fixing a hyperlink to the bottom of a div element. Looking for help!

[Malcolm]

Hi all,

I want to position a hyperlink at the bottom of my div container (similar to vertical-align: text-bottom), but wasn't able to achieve this. Should I use the position property or create another div and place my hyperlink within that div?

Would love to hear your ideas!

 

[LTomy]

You could do something like that:

div a{
  position: absolute;
  bottom: 10px;
}

The <a> element will be placed at 10px from the bottom of its parent.

Oh... Just saw you said:

Should I use the position property or[...]

Sorry .

Do giving the style

margin-top: auto;

to the <a> element does the job?

 

[Malcolm]

You could do something like that:

div a{
  position: absolute;
  bottom: 10px;
}

The <a> element will be placed at 10px from the bottom of its parent.

Oh... Just saw you said:

Sorry .

Do giving the style

margin-top: auto;

to the <a> element does the job?

I'll try it, I was trying to avoid position: absolute as much as possible because I found it to be a little bit of pain while dealing with mobile devices. But I can play around with it.

Could you explain what margin-top: auto would do?

 

[LTomy]

Could you explain what margin-top: auto would do?

From what I know, the margin at the top will take all the space it can, so the element will be located at the bottom.